<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="(Default: Extracted from file)" 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>
