<div class="fontsampler-font-set">
    <label><h2>Font name (mandatory)</h2>
        <input name="fontname[]" type="text" data-validation="length" data-validation-length="3-50"
                {% if font.name is empty %} placeholder="e.g. MyFont Regular Italic" class="fontsampler-font-set-fontname fontsampler-input-warning"
        {% else %} value="{{ font.name }}"
                {% endif %}>
    </label>

    <h2>Font files</h2>
    <table class="fontsampler-fonts-table">
        <thead>
        <tr>
            <th>Format</th>
            <th>Current file</th>
            <th>Upload new file</th>
            <th>Remove existing file</th>
        </tr>
        </thead>
        <tbody>
        {% for format in formats %}
            <tr class="fontsampler-fontset-files
				{{ is_legacy_format(format) ? 'fontsampler-admin-legacy-format' : 'fontsampler-admin-format' }}">
                <td><code class="fileformat">{{ format }}</code></td>
                <td class="fontsampler-fontset-current-file">
                    <div class="fontsampler-font-container"><span class="filename">
					{% if font[format] is not empty %}
                        {{ font[format] }}
                    {% endif %}
					</span></div>
                    <input type="hidden" class="fontsampler-font-id" name="{{ format }}[]"
                           value="{{ font[format ~ '_id'] }}">

                    <div class="fontsampler-font-upload-preview"></div>
                </td>
                <td>
                    <p class="button add fontsampler-upload-font">
                        <i class="icon">+</i>
                        <span>Add or replace file</span>
                    </p>
                </td>
                <td>
                    <button class="button delete fontsampler-remove-font {% if font[format] is empty %} hidden {% endif %}">
                        <i class="icon">&times;</i>
                        <span>Delete file</span>
                    </button>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>