{% extends "base.html" %}

{% block media %}
    {{ form.media.css }}
    <style>
        form#clarification-form {
            display: block;
            margin: 0 auto;
            width: 100%;
            max-width: 750px;
            padding-top: 1em;
        }

        #id_title {
            width: 100%;
        }

        form#clarification-form .submit {
            margin: 10px 0 0 auto;
        }
    </style>
{% endblock %}

{% block js_media %}
{{ form.media.js }}
<script>
    $(function() {
        $('#problem-select').select2({width: '40em'});
    });
</script>
{% endblock %}

{% block body %}
    <form id="clarification-form" action="" method="POST" class="form-area">
        {% csrf_token %}
        {% if form.body.errors %}
            <div class="form-errors">
                {{ form.body.errors }}
            </div>
        {% endif %}
        <h4>
            <span>{{_('Problem')}}: </span>
            <select name="problem" id="problem-select">
                {% for problem in problems %}
                    <option value="{{ problem.problem.code }}" class="point-dropdown">
                        {{ problem.order }}. {{problem.problem.name}}
                    </option>
                {% endfor %}
            </select>
        </h4>
        <div class="body-block">{{ form.body }}</div>
        <button type="submit" class="submit">{{ _('Create') }}</button>
    </form>
{% endblock %}