{% extends "layout.html" %}
{% block content %}
<div class="container centered">
    <div class="row">
        <div class="col-md-4 text-center"><h2>炎の亀</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <img class="padded" src="{{ url_for('static', filename='burned.png')}}">
        </div>
        <form id="submissionform" role="form" class="col-md-8 form-group" method="POST" action="">
            <div class="input-group">
                {{ form.csrf_token }}
                {{ form.api_key(**{'class':'form-control','placeholder':'Insert API Key'})  }}
                <span class="input-group-btn">
                    <button id="submitbutton" class="btn btn-default" type="submit">Go!</button>
                </span>
            </div>
        </form>
        <div class="col-md-8">
            {% 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 %}