<h2>Interface layout</h2>
{% if settings is not empty %}
<p>Note that this layout is used for Fontsamplers with default features and will vary if a Fontsampler
uses customized features or layout. Changes to styling only become active in the preview after saving.</p>
{% endif %}

<div id="fontsampler-admin-ui-wrapper">
    <input name="ui_order" type="hidden" value="{{ ui_order }}">

    <ul id="fontsampler-ui-blocks-list">
        {% for item, class in blocks %}
        <li>
            <div class="fontsampler-ui-block-overlay"
                 data-item="{{ item }}"
                 data-default-class="{{ block_classes[item][0] }}">
                <button class="fontsampler-ui-block-settings">
                    <img src="{{ image('icons/settings.svg') }}">
                </button>
                <div class="fontsampler-ui-block-options">
                    <button class="fontsampler-ui-block-add-break">Insert row break after</button>
                    <div class="fontsampler-ui-block-layout-classes">
                        {{ block_labels[item] }}-block layout:
                        {% for cl in block_classes[item] %}
                        <label><input type="radio"
                                      value="{{ cl }}"
                                      data-target="{{ item }}"
                                      name="layout_class_{{ item }}"
                                      {% if cl == class %} checked="checked" {% endif %}>
                                <span>{{ cl }}</span>
                        </label>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </li>

        {% endfor %}
    </ul>

    <!-- gets populated with the actual fontsampler instance loaded via ajax -->
    <div id="fontsampler-ui-layout-preview"></div>

</div>


<div class="fontsampler-admin-column-wrapper">
    <div class="fontsampler-admin-column-half">
        <div id="fontsampler-ui-layout-preview-options">
            <p>Select the Fontsamplers' column layout. The size of the Fontsampler always depends
                on its container in the page layout, so Fontsamplers have an different overall size when
                rendered in your site's theme. Columns scale proportionally with the Fontsampler's
                container.</p>

            {# Include data-value for JS extraction, so the real value of the "default" can be null #}
            {% if settings is empty %}
                <label class="fontsampler-admin-label-block">
                    <input type="radio" data-value="{{ defaults.ui_columns }}" value="default" name="ui_columns"
                            {% if set.ui_columns is empty %} checked="checked" {% endif %}>
                    Use default ({{ defaults.ui_columns }} {{ defaults.ui_columns == 1 ? 'column' : 'columns' }})
                </label>
            {% endif %}
            <label class="fontsampler-admin-label-block">
                <input type="radio" data-value="1" value="1" name="ui_columns"
                        {% if set.ui_columns == 1 %} checked="checked" {% endif %}>1 column
                <small>(For mobile devices this will automatically be used as fallback)</small>
            </label>
            <label class="fontsampler-admin-label-block">
                <input type="radio" data-value="2" value="2" name="ui_columns"
                        {% if set.ui_columns == 2 %} checked="checked" {% endif %}>2 columns
            </label>
            <label class="fontsampler-admin-label-block">
                <input type="radio" data-value="3" value="3" name="ui_columns"
                        {% if set.ui_columns == 3 %} checked="checked" {% endif %}>3 columns
            </label>
            <label class="fontsampler-admin-label-block">
                <input type="radio" data-value="4" value="4" name="ui_columns"
                        {% if set.ui_columns == 4 %} checked="checked"{% endif %}>4 columns
            </label>
        </div>
    </div>
    <div class="fontsampler-admin-column-half">
        <p>Customize the layout of interface elements to differ from the defaults.
            Simply hover any element, then drag and drop the block into a new position.
        </p>
        <small>Only options you have enabled above will be available for sorting in this preview.</small>
        <br>
        <small>Note that the font displayed below is only a placeholders to render the interface.</small>
    </div>
</div>