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

    <div class="row">
        <div class="col-xs-12 text-center">
            <div class="btn-group btn-group-lg" role="group" aria-label="card type">
                <a href="{{ url_for('general') }}" class="btn btn-{{ "primary" if card_type == "general" else "default" }}">General</a>
                <a href="{{ url_for('code') }}" class="btn btn-{{ "primary" if card_type == "code" else "default" }}">Code</a>
            </div>
        </div>
    </div>

    <hr/>

    <div class="row memorizePanel">
        <!--
        <div class="col-xs-2">
            <div class="alignContainer">
                <div class="alignMiddle text-right">
                    <br/>
                    <br/>
                    <a href="wewetw"><i class="fa fa-chevron-left fa-5x"></i></a>
                </div>
            </div>
        </div>
        -->
        <div class="col-xs-8 col-xs-offset-2">
            <div class="panel panel-default cardFront">
                <div class="panel-body">
                    <div class="alignContainer">
                        <div class="alignMiddle frontText">
                            <h3 class="text-center">{{ card.front }}</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-primary cardBack">
                <div class="panel-body">
                    <div class="alignContainer">
                        <div class="alignMiddle frontText">
                            {% if card.type == 1 %}
                                {% if short_answer %}
                                    <div class="text-center largerText">
                                {% endif %}
                                    {{ card.back|replace("\n", "<br />")|safe }}
                                {% if short_answer %}
                                    </div>
                                {% endif %}
                            {% else %}
                                <pre>{{ card.back|safe }}</pre>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--
        <div class="col-xs-2">
            <div class="alignContainer">
                <div class="alignMiddle text-left">
                    <br/>
                    <br/>
                    <a href="ergergerge"><i class="fa fa-chevron-right fa-5x"></i></a>
                </div>
            </div>
        </div>
        -->
    </div>

    <div class="row">
        <div class="col-xs-12 text-center">
            <a href="javascript:" class="btn btn-primary btn-lg flipCard">
                <i class="fa fa-exchange"></i>
                Flip Card
            </a>
            &nbsp;
            &nbsp;
            <a href="{{ url_for('mark_known', card_id=card.id, card_type=card_type) }}" class="btn btn-success btn-lg">
                <i class="fa fa-check"></i>
                I Know It
            </a>
            &nbsp;
            &nbsp;
            <a href="{{ url_for(card_type) }}" class="btn btn-primary btn-lg">
                Next Card
                <i class="fa fa-arrow-right"></i>
            </a>
        </div>
    </div>

{% endblock %}