{% extends "layout.html" %}
{% block content %}
<div class="modal fade" tabindex="-1" role="dialog" id="dataInfo">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">What information is stored about me?</h4>
            </div>
            <div class="modal-body">
                <p>From querying the WaniKani API, this application stores the following information.</p>
                <ul>
                    <li>API Key</li>
                    <li>Username</li>
                    <li><a href="https://en.gravatar.com/site/implement/images/">Gravatar email hash</a></li>
                    <li>Your WK SRS data for Radicals, Kanji and Vocabulary</li>
                </ul>
                <p>This application cannot make alterations in any way to your WaniKani account or any associated data.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="container centered">
    <div class="row">
        <div class="col-md-4 text-center"><h2>炎の亀</h2> <span class="label label-primary">BETA</span>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 col-xs-12 text-center">
            <img class="padded" src="{{ url_for('static', filename='burned.png')}}" alt="Turtle with fire icon on back">
        </div>
        <div class="col-md-8 col-xs-12">
        <form id="submissionform" role="form" class="form-group" method="POST" action="/">
            <div class="input-group">
                {{ form.csrf_token }}
                {{ form.api_key(**{'class':'form-control','placeholder':'Insert API Key (or WK Username if you have used this before)'})  }}
                <span class="input-group-btn">
                    <button id="submitbutton" class="btn btn-default" type="submit">Go!</button>
                </span>
            </div>
        </form>
        <div class="navbar-text"><a href="https://www.wanikani.com/account"><img alt="WaniKani" src="{{ url_for('static', filename='wanikani.png') }}"> WaniKani Account (Get API key from here!)</a>
            <br />
            <br />
            <button type="button" class="btn btn-link" data-toggle="modal" data-target="#dataInfo">
                What information is stored about me?
            </button>
        </div>
        </div>
        <div class="col-md-8 col-xs-12">
            {% for error in form.api_key.errors %}
                <div class="alert alert-warning alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    {{ error }}
                </div>
            {% endfor %}
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                        {% for category, message in messages %}
                            <div class="alert alert-danger alert-dismissible" role="alert">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                {{ message }}
                            </div>
                        {% endfor %}
                {% endif %}
            {% endwith %}
        </div>
    </div>
</div>
{% endblock %}