{# Template : Number Arrows #}

{% extends 'chop/layouts.twig' %}

{% block content %}

    <div class="wrapper">
        <h2>Number arrows on input .numberArrows field</h2>
        <p>This requires a class of .numberArrows and type tel on the actual input.</p>
        <form>
            <div class="row">
                <label for=""></label>
                <div class="inputWrap">
                    <input class="numberArrows" type="tel" data-max="10" value="4"/>
                </div>
            </div>
        </form>
    </div>

    <div class="wrapper">
        <h2>Number arrows on lots of input fields</h2>
        <form>
            <div class="row">
                <label for=""></label>
                <div class="inputWrap">
                    <input class="numberArrows" type="tel" data-max="7" value="3"/>
                </div>
            </div>
            <div class="row">
                <label for=""></label>
                <div class="inputWrap">
                    <input class="numberArrows" type="tel" data-max="4" value="0"/>
                </div>
            </div>
            <div class="row">
                <label for=""></label>
                <div class="inputWrap">
                    <input class="numberArrows" type="tel" data-max="8" value="2"/>
                </div>
            </div>
        </form>
    </div>

    <div class="wrapper">
        <h2>Minimum value -5</h2>
        <form>
            <div class="row">
                <label for=""></label>
                <div class="inputWrap">
                    <input class="numberArrows" type="tel" data-min="-5" value="3"/>
                </div>
            </div>
        </form>
    </div>

    <div class="wrapper">
        <h2>Minimum value 4</h2>
        <form>
            <div class="row">
                <label for=""></label>
                <div class="inputWrap">
                    <input class="numberArrows" type="tel" data-min="4" value="6"/>
                </div>
            </div>
        </form>
    </div>

    <div class="wrapper">
        <h2>Arrows to right</h2>
        <p>Add class of .right to the input</p>
        <form>
            <div class="row">
                <label for=""></label>
                <div class="inputWrap">
                    <input class="numberArrows right" type="tel" data-min="4" value="6"/>
                </div>
            </div>
        </form>
    </div>

    <div class="wrapper">
        <h2>Fade arrows in on hover</h2>
        <p>Add class of .fade to the input</p>
        <form>
            <div class="row">
                <label for=""></label>
                <div class="inputWrap">
                    <input class="numberArrows fade" type="tel" data-min="4" value="6"/>
                </div>
            </div>
        </form>
    </div>

    <div class="wrapper">
        <a href="#" class="button js_disable">destroy</a>
    </div>

    <div class="wrapper">
        <a href="#" class="button js_enable">enable</a>
    </div>

{% endblock %}
