{% extends "layout.html" %}
{% block body %}

    <div class="well editPanel">
        <h2>Add a Card</h2>
        <form action="{{ url_for('add_card') }}" method="post" class="cardForm">
            <div class="form-group">
                {% for tag in tags %}
                <label for={{tag.tagName}} class="toggleButton btn btn-default btn-lg">{{tag.tagName}} &nbsp;
                    <input type="radio" name="type" value={{tag.id}} id={{tag.tagName}}>
                </label>
                {% endfor %}
            </div>
            <div class="form-group fieldFront">
                <label for="front">Front of Card</label>
                <input type="text" name="front" id="front" class="form-control">
            </div>
            <div class="form-group fieldBack">
                <label for="back">Back of Card</label>
                <textarea name="back"
                          class="form-control"
                          id="back"
                          placeholder="back of card"
                          rows="12"></textarea>
            </div>
            <div class="form-group">
                <button type="submit" class="saveButton btn btn-lg btn-primary">Save</button>
            </div>
        </form>
    </div>

    <div class="page-header">
        <h2>{{ cards|length }} Card{{ '' if (cards|length == 1) else 's' }}</h2>
    </div>

{% endblock %}