{% extends "shared/base.html" %}


{% block title %}
  <title>Issue Detail</title>
{% endblock %}

{% block content %}
  <div class="container">
  <div class="row">
    <div class="col">
      <h1 class="display-5">Issue Detail</h1>
    </div>
  </div>

  <div class="row">
      <table class="table table-striped table-hover">
        <tbody>
          <tr>
            <th scope="row">Issue Number</th>
            <td colspan="2">{{issue.issue_number}}</td>
          </tr>
          <tr>
            <th scope="row">Full Title</th>
            <td colspan="2">{{issue.title}}</td>
          </tr>
          <tr>
            <th scope="row">Published</th>
            <td colspan="2">{{issue.published_on}}</td>
          </tr>
          <tr>
            <th scope="row">Auf Lager</th>
            <td colspan="2">
              {% with check=issue.in_stock %}
      		    {% include "components/check.html" %}
    	      {% endwith %}
            </td>
          </tr>
          <tr>
            <th scope="row">Gelesen</th>
            <td colspan="2">
              {% with check=issue.is_read %}
      		    {% include "components/check.html" %}
    	      {% endwith %}
            </td>
          </tr>
          <tr>
            <th scope="row">Comic</th>
            <td colspan="2">
                <a href="/comic/comics/{{issue.comic_id}}">{{issue.comic.title}}</a>
            </td>
          </tr>
          <tr>
            <th scope="row">Volume</th>
            <td colspan="2">
                <a href="/comic/comics/{{issue.volume_id}}">{{issue.volume.name}}</a>
            </td>
          </tr>
          <tr>
            <th scope="row">Data Created</th>
            <td colspan="2">{{issue.created_date}}</td>
          </tr>
          <tr>
            <th scope="row">Data Modified</th>
            <td colspan="2">{{issue.last_modified_date}}</td>
          </tr>
          <tr>
            <th scope="row">Data Version</th>
            <td colspan="2">{{issue.version}}</td>
          </tr>
        </tbody>
    </table>
  </div>
</div>
{% endblock %}