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

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

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

	<div class="small callout primary">
		<ul>
			<li>
				<a href="{{ path('camera_new') }}">Add a Camera</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="#working">Working</a>
		</li>
		<li class="tabs-title">
			<a href="#not_working">Broken / Display Only</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="working">
			<table class="hover scroll sortable stack">
				<thead>
				<tr>
					<th>Actions</th>
					<th>Brand</th>
					<th>Mount</th>
					<th>Model</th>
					<th>Film Format</th>
					<th>Crop Factor</th>
					<th>Serial</th>
					<th>Formerly Owned?</th>
					<th>Purchase Price</th>
					<th>Battery Type</th>
					<th>Notes</th>
				</tr>
				</thead>
				<tbody>
				{% for camera in working %}
					<tr>
						<td>
							<ul>
								<li>
									<a href="{{ path('camera_edit', { 'id': camera.id }) }}">
										Edit
										<span class="edit-icon">&#9998;</span>
									</a>
								</li>
								<li>
									<a href="{{ path('camera_show', { 'id': camera.id }) }}">View 👁</a>
								</li>
							</ul>
						</td>
						<td>{{ camera.brand }}</td>
						<td>{{ camera.mount }}</td>
						<td>{{ camera.model }}</td>
						<td>{{ camera.filmFormat }}</td>
						<td>{{ camera.cropFactor }}</td>
						<td>{{ camera.serial }}</td>
						<td class="text-center">
							{% if camera.formerlyOwned %}
								<span class='small callout success'>✔</span>
							{% else %}
								<span class='small callout alert'>&#10007;</span>
							{% endif %}
						</td>
						<td>${{ camera.purchasePrice }}</td>
						<td>{{ camera.batteryType }}</td>
						<td>{{ camera.notes }}</td>
					</tr>
				{% endfor %}
				</tbody>
			</table>
		</div>
		<div class="tabs-panel" id="not_working">
			<table class="hover scroll sortable stack">
				<thead>
				<tr>
					<th>Actions</th>
					<th>Brand</th>
					<th>Mount</th>
					<th>Model</th>
					<th>Film Format</th>
					<th>Crop Factor</th>
					<th>Serial</th>
					<th>Formerly Owned?</th>
					<th>Purchase Price</th>
					<th>Battery Type</th>
					<th>Notes</th>
				</tr>
				</thead>
				<tbody>
				{% for camera in not_working %}
					<tr>
						<td>
							<ul>
								<li>
									<a href="{{ path('camera_edit', { 'id': camera.id }) }}">
										Edit
										<span class="edit-icon">&#9998;</span>
									</a>
								</li>
								<li>
									<a href="{{ path('camera_show', { 'id': camera.id }) }}">View 👁</a>
								</li>
							</ul>
						</td>
						<td>{{ camera.brand }}</td>
						<td>{{ camera.mount }}</td>
						<td>{{ camera.model }}</td>
						<td>{{ camera.filmFormat }}</td>
						<td>{{ camera.cropFactor }}</td>
						<td>{{ camera.serial }}</td>
						<td class="text-center">
							{% if camera.formerlyOwned %}
								<span class='small callout success'>✔</span>
							{% else %}
								<span class='small callout alert'>&#10007;</span>
							{% endif %}
						</td>
						<td>${{ camera.purchasePrice }}</td>
						<td>{{ camera.batteryType }}</td>
						<td>{{ camera.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>Model</th>
					<th>Mount</th>
					<th>Film Format</th>
					<th>Serial</th>
					<th>Purchase Price</th>
					<th>Battery Type</th>
					<th>Notes</th>
				</tr>
				</thead>
				<tbody>
				{% for camera in not_received %}
					<tr>
						<td>
							<ul>
								<li>
									<a href="{{ path('camera_edit', { 'id': camera.id }) }}">
										Edit
										<span class="edit-icon">&#9998;</span>
									</a>
								</li>
								<li>
									<a href="{{ path('camera_show', { 'id': camera.id }) }}">View 👁</a>
								</li>
							</ul>
						</td>
						<td>{{ camera.brand }}</td>
						<td>{{ camera.model }}</td>
						<td>{{ camera.mount }}</td>
						<td>{{ camera.filmFormat }}</td>
						<td>{{ camera.serial }}</td>
						<td>${{ camera.purchasePrice }}</td>
						<td>{{ camera.batteryType }}</td>
						<td>{{ camera.notes }}</td>
					</tr>
				{% endfor %}
				</tbody>
			</table>
		</div>
	</div>
{% endblock %}