{% extends "@Contao/be_main" %}

{% block main_content %}

    <div id="alpdeskgooglefonts_wrapper">

        <div id="alpdeskgooglefonts_filter">

            <form method="post">

                <input type="hidden" name="REQUEST_TOKEN" value="{{ token }}">
                <input type="hidden" name="setFilter" value="1">

                <input type="text" class="text" name="filterValue" value="{{ filterValue }}"
                       placeholder="filter...">
                &nbsp;&nbsp;
                <button title="" id="fullsize" class="tl_submit">
                    <img width="15" src="/system/themes/flexible/icons/filter-apply.svg">
                </button>

            </form>

        </div>

        <div id="alpdeskgooglefonts_container">

            {% if message != '' %}
                <div id="alpdeskgooglefonts_message"> {{ message | raw }}</div>
            {% endif %}

            <div id="alpdeskgooglefonts_fontitemscontainer">

                {% for fontItem in fontItems %}

                    <div class="alpdeskgooglefontitem">

                        <div class="alpdeskgooglefontitem_inside">

                            <form method="post">

                                <input type="hidden" name="REQUEST_TOKEN" value="{{ token }}">
                                <input type="hidden" name="fontId" value="{{ fontItem.id }}">
                                <input type="hidden" name="fontVersion" value="{{ fontItem.version }}">
                                <input type="hidden" name="fontFamily" value="{{ fontItem.family }}">
                                <input type="hidden" name="exportFont" value="1">

                                <h2>
                                    {{ fontItem.family }} | <small> {{ fontItem.category }},
                                        Version: {{ fontItem.version }}
                                        , Update: {{ fontItem.lastModified }}</small>
                                </h2>

                                <div class="alpdeskgooglefontitem_variant">

                                    <h3>Variants</h3>

                                    {% for variant in fontItem.variants %}

                                        <div>

                                            {% if fontItem.defVariant == variant %}
                                                <input type="checkbox" name="fontVariants[]"
                                                       value="{{ variant }}" checked="checked"> {{ variant }}
                                            {% else %}
                                                <input type="checkbox" name="fontVariants[]"
                                                       value="{{ variant }}"> {{ variant }}
                                            {% endif %}


                                        </div>

                                    {% endfor %}

                                </div>

                                <div class="alpdeskgooglefontitem_subsets">

                                    <h3>Subset</h3>

                                    {% for subset in fontItem.subsets %}

                                        <div>

                                            {% if fontItem.defSubset == subset %}
                                                <input type="checkbox" name="fontSubsets[]"
                                                       value="{{ subset }}" checked="checked"> {{ subset }}
                                            {% else %}
                                                <input type="checkbox" name="fontSubsets[]"
                                                       value="{{ subset }}"> {{ subset }}
                                            {% endif %}
                                        </div>

                                    {% endfor %}

                                </div>

                                <div class="alpdeskgooglefonts_clear"></div>

                                <div class="alpdeskgooglefonts_submitContainer">
                                    <button type="submit" name="export" class="tl_submit">Download</button>
                                    <button type="submit" name="export_unicode" class="tl_submit">Download Unicode
                                        (BETA)
                                    </button>
                                </div>

                            </form>

                        </div>


                    </div>


                {% endfor %}

                <div class="alpdeskgooglefonts_clear"></div>

            </div>

        </div>

    </div>

{% endblock %}