{% extends 'base.html.twig' %}

{% block title %}Camera 📷 CRUD - Lenses{% endblock %}

{% block body %}
	<h2>Lenses</h2>

	<div class="small primary callout">
		<ul>
			<li>
				<a href="{{ path('lens_new') }}">Add a Lens</a>
			</li>
		</ul>
	</div>

	<ul
		class="tabs"
		data-deep-link="true"
		data-update-history="true"
		data-deep-link-smudge="true"
		data-deep-link-smudge-delay="500"
		data-tabs
		id="classifications"
	>
		<li class="tabs-title is-active"  aria-selected="true">
			<a href="#received">Received</a>
		</li>
		<li class="tabs-title">
			<a href="#not_received">Not Yet Received</a>
		</li>
	</ul>

	<div class="tabs-content" data-tabs-content="classifications">
		<div class="tabs-panel is-active" id="received">
			<table class="hover scroll sortable stack">
				<caption>Received</caption>
				<thead>
				<tr>
					<th>Actions</th>
					<th>Brand</th>
					<th>Product Line</th>
					<th>Description</th>
					<th>Aperture Range</th>
					<th>Focal Range</th>
					<th class="text-right">Serial</th>
					<th class="text-right">Purchase Price</th>
					<th>Mount</th>
					<th>Image Size</th>
					<th>Formerly Owned</th>
					<th>Filter (F/R)</th>
					<th>Is Teleconverter?</th>
					<th>Design Elements / Groups</th>
					<th>Aperture Blades</th>
					<th>Notes</th>
				</tr>
				</thead>
				<tbody>
				{% for lens in lenses %}
					<tr>
						<td>
							<ul>
								<li>
									<a href="{{ path('lens_edit', { 'id': lens.id }) }}">
										Edit
										<span class="edit-icon">&#9998;</span>
									</a>
								</li>
								<li>
									<a href="{{ path('lens_show', { 'id': lens.id }) }}">View 👁</a>
								</li>
							</ul>
						</td>
						<td>{{ lens.brand }}</td>
						<td>{{ lens.productLine }}</td>
						<td>{{ lens.coatings }} {{ lens.model }}</td>
						<td>{{ lens.minFStop }} &mdash; {{ lens.maxFStop }}</td>
						<td>{{ lens.minFocalLength }} &mdash; {{ lens.maxFocalLength }}</td>
						<td class="text-right">{{ lens.serial }}</td>
						<td class="text-right">${{ lens.purchasePrice }}</td>
						<td>{{ lens.mount }}</td>
						<td>{{ lens.imageSize }}</td>
						<td class="text-center">
							{% if lens.formerlyOwned %}
								<span class='small callout success'>✔</span>
							{% else %}
								<span class='small callout alert'>&#10007;</span>
							{% endif %}
						</td>
						<td>{{ lens.frontFilterSize }} / {{ lens.rearFilterSize }}</td>
						<td class="text-center">
							{% if lens.isTeleconverter %}
								<span class='small callout success'>✔</span>
							{% else %}
								<span class='small callout alert'>&#10007;</span>
							{% endif %}
						</td>
						<td>{{ lens.designElements }} / {{ lens.designGroups }}</td>
						<td>{{ lens.apertureBlades }}</td>
						<td>{{ lens.notes }}</td>
					</tr>
				{% endfor %}
				</tbody>
			</table>
		</div>
		<div class="tabs-panel" id="not_received">
			<table class="hover scroll sortable stack">
				<thead>
				<tr>
					<th>Actions</th>
					<th>Brand</th>
					<th>Description</th>
					<th>Aperture Range</th>
					<th>Focal Range</th>
					<th class="text-right">Serial</th>
					<th class="text-right">Purchase Price</th>
					<th>Mount</th>
					<th>Image Size</th>
					<th>Formerly Owned</th>
					<th>Front Filter Size</th>
					<th>Rear Filter Size</th>
					<th>Is Teleconverter?</th>
					<th>Design Elements / Groups</th>
					<th>Aperture Blades</th>
					<th>Notes</th>
				</tr>
				</thead>
				<tbody>
				{% for lens in not_received %}
					<tr>
						<td>
							<ul>
								<li>
									<a href="{{ path('lens_edit', { 'id': lens.id }) }}">
										Edit
										<span class="edit-icon">&#9998;</span>
									</a>
								</li>
								<li>
									<a href="{{ path('lens_show', { 'id': lens.id }) }}">View 👁</a>
								</li>
							</ul>
						</td>
						<td>{{ lens.brand }}</td>
						<td>{{ lens.coatings }} {{ lens.productLine }} {{ lens.model }}</td>
						<td>{{ lens.minFStop }} &mdash; {{ lens.maxFStop }}</td>
						<td>{{ lens.minFocalLength }} &mdash; {{ lens.maxFocalLength }}</td>
						<td class="text-right">{{ lens.serial }}</td>
						<td class="text-right">${{ lens.purchasePrice }}</td>
						<td>{{ lens.mount }}</td>
						<td>{{ lens.imageSize }}</td>
						<td class="text-center">
							{% if lens.formerlyOwned %}
								<span class='small callout success'>✔</span>
							{% else %}
								<span class='small callout alert'>&#10007;</span>
							{% endif %}
						</td>
						<td>{{ lens.frontFilterSize }}</td>
						<td>{{ lens.rearFilterSize }}</td>
						<td class="text-center">
							{% if lens.isTeleconverter %}
								<span class='small callout success'>✔</span>
							{% else %}
								<span class='small callout alert'>&#10007;</span>
							{% endif %}
						</td>
						<td>{{ lens.designElements }} / {{ lens.designGroups }}</td>
						<td>{{ lens.apertureBlades }}</td>
						<td>{{ lens.notes }}</td>
					</tr>
				{% endfor %}
				</tbody>
			</table>
		</div>
	</div>
{% endblock %}