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

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

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

	<div class="small callout primary">
		<ul>
			<li>
				<a href="{{ path('film_new') }}">Add a Film</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">
			<a href="#in_camera" aria-selected="true">In a camera</a>
		</li>
		<li class="tabs-title">
			<a href="#other">Everything Else</a>
		</li>
	</ul>

	<div class="tabs-content" data-tabs-content="classifications">
		<div class="tabs-panel is-active" id="in_camera">
			<table class="hover scroll sortable stack">
				<thead>
				<tr>
					<th>Actions</th>
					<th>Brand</th>
					<th>Product Line</th>
					<th>Film Name</th>
					<th>Film Alias</th>
					<th>Film Speed</th>
					<th>Film Format</th>
					<th>Film Base</th>
					<th>Unused Rolls</th>
					<th>Rolls in a Camera</th>
					<th>Developed Rolls</th>
					<th>Chemistry</th>
					<th>Notes</th>
				</tr>
				</thead>
				<tbody>
				{% for film in in_camera %}
					<tr>
						<td>
							<ul>
								<li>
									<a href="{{ path('film_edit', { 'id': film.id }) }}">
										Edit
										<span class="edit-icon">&#9998;</span>
									</a>
								</li>
								<li>
									<a href="{{ path('film_show', { 'id': film.id }) }}">View 👁</a>
								</li>
							</ul>
						</td>
						<td>{{ film.brand }}</td>
						<td>{{ film.productLine }}</td>
						<td>{{ film.filmName }}</td>
						<td>{{ film.filmAlias }}</td>
						<td>{{ film.filmSpeedAsa }}/{{ film.filmSpeedDin }}&deg;</td>
						<td>{{ film.filmFormat }}</td>
						<td>{{ film.filmBase }}</td>
						<td>{{ film.unusedRolls }}</td>
						<td>{{ film.rollsInCamera }}</td>
						<td>{{ film.developedRolls }}</td>
						<td>{{ film.chemistry }}</td>
						<td>{{ film.notes }}</td>
					</tr>
				{% endfor %}
				</tbody>
			</table>
		</div>
		<div class="tabs-panel" id="other">
			<table class="hover scroll sortable stack">
				<thead>
				<tr>
					<th>Actions</th>
					<th>Brand</th>
					<th>Product Line</th>
					<th>Film Name</th>
					<th>Film Alias</th>
					<th>Film Speed</th>
					<th>Film Format</th>
					<th>Film Base</th>
					<th class="text-center">In Stock</th>
					<th class="text-center">Developed</th>
					<th class="text-right">Chemistry</th>
					<th>Notes</th>
				</tr>
				</thead>
				<tbody>
				{% for film in films %}
					<tr>
						<td>
							<ul>
								<li>
									<a href="{{ path('film_edit', { 'id': film.id }) }}">
										Edit
										<span class="edit-icon">&#9998;</span>
									</a>
								</li>
								<li>
									<a href="{{ path('film_show', { 'id': film.id }) }}">View 👁</a>
								</li>
							</ul>
						</td>
						<td>{{ film.brand }}</td>
						<td>{{ film.productLine }}</td>
						<td>{{ film.filmName }}</td>
						<td>{{ film.filmAlias }}</td>
						<td>{{ film.filmSpeedAsa }}/{{ film.filmSpeedDin }}&deg;</td>
						<td>{{ film.filmFormat }}</td>
						<td>{{ film.filmBase }}</td>
						<td class="text-center">{{ film.unusedRolls }}</td>
						<td class="text-center">{{ film.developedRolls }}</td>
						<td class="text-right">{{ film.chemistry }}</td>
						<td>{{ film.notes }}</td>
					</tr>
				{% endfor %}
				</tbody>
			</table>
		</div>
	</div>
{% endblock %}