{% extends "detail.html" %}
{% load static %}
{% load boolicontag %}
{% load formatting %}

{% block content %}
{% if object.image %}
<div class="text-center">
  <figure class="figure img-thumbnail">
    <img src="{{ object.image.url }}" class="figure-img img-fluid rounded" alt="{{ object }}" title="{{ object }}">
    <figcaption class="figure-caption text-center">{{ object }}{% if object.image_attribution %} by
      {% if object.image_attribution_url %}<a
        href="{{ object.image_attribution_url}}">{{ object.image_attribution }}</a>{% else %}{{ object.image_attribution }}{% endif %}{% endif %}
    </figcaption>
  </figure>
</div>
{% endif %}

<table class="table table-hover">
  <tr>
    <th colspan="2" id="summary"><img src="{% static "svg/summary.svg" %}" width="30" height="30" alt="Summary">&nbsp;<a
        href="#">Summary</a></th>
  </tr>
  {% if object.manufacturer is not None %}
  <tr>
    <td>Manufacturer</td>
    <td>{% include "manufacturer.html" with manufacturer=object.manufacturer %}</td>
  </tr>
  {% endif %}
  <tr>
    <td>Model</td>
    <td>{{ object.model|aperture }}</td>
  </tr>
  {% if object.disambiguation %}
  <tr>
    <td>Disambiguation</td>
    <td>{{ object.disambiguation }}</td>
  </tr>
  {% endif %}
  {% if object.mount is not None %}
  <tr>
    <td>Mount</td>
    <td><a href="{% url 'schema:mount-detail' object.mount.slug %}">{{ object.mount }}</a></td>
  </tr>
  {% endif %}
  {% if object.introduced is not None %}
  <tr>
    <td>Marketed</td>
    <td>{{ object.introduced }}{% if object.discontinued is not None %}-{{ object.discontinued }}{% endif %} <small
        class="text-muted">{{ object.introduced|yearssince }}</small></td>
  </tr>
  {% endif %}




  <tr>
    <th colspan="2" id="optics"><img src="{% static "svg/optics.svg" %}" width="30" height="30" alt="Optics"> <a
        href="#optics">Optics</a></th>
  </tr>
  {% if object.zoom is not None %}
  <tr>
    <td>Zoom</td>
    <td>{{ object.zoom|boolicontag }}</td>
  </tr>
  {% endif %}
  {% if object.min_focal_length is not None %}
  <tr>
    <td>Focal length</td>
    <td>
      {{ object.min_focal_length }}{% if object.zoom is not False and object.max_focal_length is not None %}-{{ object.max_focal_length }}{% endif %}mm
    </td>
  </tr>
  {% endif %}
  {% if object.zoom_ratio is not None %}
  <tr>
    <td>Zoom ratio</td>
    <td>{{ object.zoom_ratio }}&times;</td>
  </tr>
  {% endif %}
  {% if object.max_aperture is not None %}
  <tr>
    <td>Aperture</td>
    <td>
      <em>f</em>/{{ object.max_aperture }}{% if object.min_aperture is not None %}-{{ object.min_aperture }}{% endif %}
    </td>
  </tr>
  {% endif %}
  {% if object.closest_focus is not None %}
  <tr>
    <td>Closest focus</td>
    <td>{{ object.closest_focus }}m</td>
  </tr>
  {% endif %}
  {% if object.elements is not None and object.groups is not None %}
  <tr>
    <td>Elements/Groups</td>
    <td>{{ object.elements }}/{{ object.groups }}</td>
  </tr>
  {% else %}
  {% if object.elements is not None %}
  <tr>
    <td>Elements</td>
    <td>{{ object.elements }}</td>
  </tr>
  {% endif %}
  {% if object.groups is not None %}
  <tr>
    <td>Groups</td>
    <td>{{ object.groups }}</td>
  </tr>
  {% endif %}
  {% endif %}
  {% if object.nominal_max_angle_diag is not None %}
  <tr>
    <td>Diagonal angle of view</td>
    <td>
      {{ object.nominal_max_angle_diag }}{% if object.zoom is not False and object.nominal_min_angle_diag is not None %}-{{ object.nominal_min_angle_diag }}{% endif %}&deg;
    </td>
  </tr>
  {% endif %}
  {% if object.lens_type %}
  <tr>
    <td>Lens type</td>
    <td>{{ object.lens_type }}</td>
  </tr>
  {% endif %}
  {% if object.magnification is not None %}
  <tr>
    <td>Maximum magnification</td>
    <td>{{ object.magnification }}&times;</td>
  </tr>
  {% endif %}
  {% if object.negative_size is not None %}
  <tr>
    <td>Negative size</td>
    <td><a href="{% url 'schema:negativesize-detail' object.negative_size.id %}">{{ object.negative_size }}</a></td>
  </tr>
  {% endif %}
  {% if object.aperture_blades is not None %}
  <tr>
    <td>Aperture blades</td>
    <td>{{ object.aperture_blades }}</td>
  </tr>
  {% endif %}
  {% if object.image_circle is not None %}
  <tr>
    <td>Image circle</td>
    <td>{{ object.image_circle }}mm</td>
  </tr>
  {% endif %}
  {% if object.coating is not None %}
  <tr>
    <td>Coating</td>
    <td>{{ object.coating }}</td>
  </tr>
  {% endif %}
  {% if object.diagram %}
  <tr>
    <td>Optical diagram</td>
    <td>
      <a href="#diagram" data-toggle="modal">
        <img src="{{ object.diagram.url }}" style="width: 200px;" class="img-fluid img-thumbnail" />
      </a>

      <!-- Modal -->
      <div class="modal fade" id="diagram" tabindex="-1" role="dialog" aria-labelledby="diagramLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="diagramLabel">{{ object }}</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <figure class="figure">
                <img src="{{ object.diagram.url }}" class="figure-img img-fluid rounded" alt="{{ object }}">
                {% if object.diagram_attribution %}<figcaption class="figure-caption text-center">Credit:
                  {% if object.diagram_attribution_url %}<a
                    href="{{ object.diagram_attribution_url}}">{{ object.diagram_attribution }}</a>{% else %}{{ object.diagram_attribution }}{% endif %}
                </figcaption>{% endif %}
              </figure>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
    </td>
  </tr>
  {% endif %}

  <tr>
    <th colspan="2" id="features"><img src="{% static "svg/features.svg" %}" width="30" height="30" alt="Features"> <a
        href="#features">Features</a></th>
  </tr>
  {% if object.autofocus is not None %}
  <tr>
    <td>Autofocus</td>
    <td>{{ object.autofocus|boolicontag }}</td>
  </tr>
  {% endif %}
  {% if object.perspective_control is not None %}
  <tr>
    <td>Perspective control</td>
    <td>{{ object.perspective_control|boolicontag }}</td>
  </tr>
  {% endif %}
  {% if object.hood is not None %}
  <tr>
    <td>Hood</td>
    <td>{{ object.hood }}</td>
  </tr>
  {% endif %}
  {% if object.shutter_model is not None %}
  <tr>
    <td>Shutter model</td>
    <td>{{ object.shutter_model }}</td>
  </tr>
  {% endif %}

  <tr>
    <th colspan="2" id="physical"><img src="{% static "svg/weight.svg" %}" width="30" height="30" alt="Physical"> <a
        href="#physical">Physical</a></th>
  </tr>
  {% if object.weight is not None %}
  <tr>
    <td>Weight</td>
    <td>{{ object.weight }}g</td>
  </tr>
  {% endif %}
  {% if object.length is not None %}
  <tr>
    <td>Length</td>
    <td>{{ object.length }}mm</td>
  </tr>
  {% endif %}
  {% if object.diameter is not None %}
  <tr>
    <td>Diameter</td>
    <td>{{ object.diameter }}mm</td>
  </tr>
  {% endif %}
  {% if object.filter_thread is not None %}
  <tr>
    <td>Filter thread</td>
    <td>{{ object.filter_thread }}mm</td>
  </tr>
  {% endif %}

  <tr>
    <th colspan="2" id="misc"><img src="{% static "svg/misc.svg" %}" width="30" height="30" alt="Misc"> <a
        href="#misc">Misc</a></th>
  </tr>
  {% if object.notes %}
  <tr>
    <td>Notes</td>
    <td>{{ object.notes|linebreaks }}</td>
  </tr>
  {% endif %}
  {% if object.linkurl is not None %}
  <tr>
    <td>URL</td>
    <td><a href="{{ object.linkurl }}">{{ object.linkurl }}</a></td>
  </tr>
  {% endif %}
  <tr>
    <th colspan="2" id="meta"><img src="{% static "svg/tag.svg" %}" width="30" height="30" alt="Meta">&nbsp;<a
        href="#meta">Meta</a></th>
  </tr>
  {% if object.tags.all %}
  <tr>
    <td>Tags</td>
    <td>{% for tag in object.tags.all %}
      <a class="btn btn-outline-primary" href="{% url 'schema:tag-detail' tag|lower %}" role="button">{{ tag }}</a>
      {% endfor %}</td>
  </tr>
  {% endif %}
  {% if related %}
  <tr>
    <td>Similar lens models</td>
    <td>
      <ul class="list-inline">
        {% for relateditem in related %}
        <li class="list-inline-item"><a
            href="{% url 'schema:lensmodel-detail' relateditem.slug %}">{{ relateditem }}</a></li>
        {% endfor %}
      </ul>
    </td>
  </tr>
  {% endif %}
  {% if history %}
  <tr>
    <td>Edit history</td>
    <td>{% include "history.html" %}</td>
  </tr>
  {% endif %}
  <tr>
    <td>Sharing</td>
    <td>{% include "sharing.html" %}</td>
  </tr>
</table>

{% if user.is_authenticated %}
{% if mine %}
<h4>In your collection</h4>

<table class="table table-hover">
  <tr>
    <th>ID</th>
    <th>Serial</th>
    <th>Manufactured</th>
    <th>Own</th>
  </tr>
  {% for lens in mine %}
  <tr>
    <td><a href="{% url 'schema:lens-detail' lens.id_owner %}">#{{ lens.id_owner }}</a></td>
    <td>{% if lens.serial is not None %}<code>{{ lens.serial }}</code>{% endif %}</td>
    <td>{% if lens.manufactured is not None %}{{ lens.manufactured }}{% endif %}</td>
    <td>{% if lens.own is not None %}{{ lens.own|boolicontag }}{% endif %}</td>
  </tr>
  {% endfor %}
</table>
{% endif %}
{% endif %}
{% endblock %}

{% block moreactions %}
<li>
  <form action="{% url 'schema:lens-create' %}">
    <input type="hidden" name="lensmodel" value="{{ object.id }}">
    <button class="btn btn-primary" type="submit">Add to collection</button>
  </form>
</li>

<li>
  <form action="{% url 'schema:lensmodel-create' %}">
    <input type="hidden" name="clone" value="{{ object.slug }}">
    <button class="btn btn-primary" type="submit">Clone this lens model</button>
  </form>
</li>
{% endblock %}
