{% extends (mode == 'ajax') ? "ajax.html.twig" : "page.html.twig" %}

{% block content %}
    <div id="attendance_sheet_details"{% if mode != 'ajax' %} class="center"{% else %} class="ui modal"{% endif %}>
    {% if mode == 'ajax' %}
        <div class="header">
    {% else %}
        <h2>
    {% endif %}
            {{ page_title }}
    {% if mode != 'ajax' %}
        </h2>
    {% else %}
        </div>
        <div class="content">
    {% endif %}
            <form action="{{ url_for('attendance_sheet') }}" id="sheet_details_form" method="POST" class="ui form">
                <div class="ui top attached accordion-styled header">
                    {{ _T("Some details about your attendance sheet...") }} - <span>{{ _T("%s attendees")|replace({'%s': data|length}) }}</span>
                </div>
                <div class="ui bottom attached accordion-styled segment">
                    <div class="active content field">
                        <div class="inline field">
                            <label for="sheet_type">{{ _T("Sheet type") }}</label>
                            <input type="text" name="sheet_type" id="sheet_type" value="{{ _T("Attendance sheet") }}" required/>
                        </div>
                        <div class="inline field">
                            <label for="sheet_title">{{ _T("Title") }}</label>
                            <input type="text" name="sheet_title" id="sheet_title"/>
                        </div>
                        <div class="inline field">
                            <label for="sheet_sub_title">{{ _T("Subtitle") }}</label>
                            <input type="text" name="sheet_sub_title" id="sheet_sub_title"/>
                        </div>
                        <div class="inline field">
                            <label for="sheet_date">{{ _T("Date") }}</label>
                            <div id="sheet_date_rangestart" class="ui calendar">
                                <div class="ui input left icon">
                                    <i class="calendar icon"></i>
                                    <input type="text" name="sheet_date" id="sheet_date" size="20"/>
                                </div>
                            </div>
                            <span class="exemple">{{ _T("(yyyy-mm-dd format)") }}</span>
                        </div>
                        <div class="inline field">
                            <div class="ui toggle checkbox">
                                <input type="checkbox" name="sheet_photos" id="sheet_photos" value="1"/>
                                <label for="sheet_photos">{{ _T("With photos?") }}</label>
                            </div>
    {% for key, value in data %}
                            <input type="hidden" name="selection[]" value="{{ value }}"/>
    {% endfor %}
                            {% include 'components/forms/csrf.html.twig' %}
                        </div>
                    </div>
                </div>
    {% if mode != 'ajax' %}
                <div class="ui basic center aligned segment">
                    <button type="submit" class="ui labeled icon primary button">
                        <i class="file pdf icon" aria-hidden="true"></i>
                        {{ _T("Generate") }}
                    </button>
                </div>
    {% endif %}

            </form>
    {% if mode == 'ajax' %}
        </div>
    {% endif %}
    </div>
{% endblock %}
