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


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

{% block content %}
<div class="container">

  <div class="row">
      <table class="table table-striped table-hover">
        <tbody>
          <tr>
            <th scope="row">Comic Title</th>
            <td colspan="2">{{comic.title}}</td>
          </tr>
          <tr>
            <th scope="row">Publisher</th>
            <td colspan="2"><a href="/comic/publishers/{{comic.publisher.id}}">{{comic.publisher.name}}</a></td>
          </tr>
          <tr>
            <th scope="row">Completed</th>
            <td colspan="2">
              {% with check=comic.completed %}
      		    {% include "components/check.html" %}
    	      {% endwith %}
            </td>
          </tr>
          <tr>
            <th scope="row">Link</th>
            <td colspan="2">{{comic.weblink}}</td>
          </tr>
          <tr>
            <th scope="row">Works</th>
            <td colspan="2">
              {% for work in comic.get_artists() %}
                    <p>
                        <a href="/comic/worktypes/{{work.id}}">{{work.name}}</a>
                        <ul>
                          {% for artist in comic.get_artists()[work] %}
                            <li><a href="/comic/artists/{{artist.id}}">{{artist.name}}</a></li>
                          {% endfor %}
                        </ul>
                    </p>
                {% endfor %}
              </td>
          </tr>
          {% if comic.volumes|length > 0 %}
            <tr>
              <th scope="row">Volumes</th>
              <td colspan="2">
                <ul>
                  {% for volume in comic.volumes %}
                    <li><a href="/comic/volumes/{{volume.id}}">{{volume.name}}</a></li>
                  {% endfor %}
                </ul>
              </td>
            </tr>
          {% endif %}
          <tr>
            <th scope="row">Issues</th>
            <td colspan="2">
              <ul>
                {% for issue in comic.sorted_issues() %}
                  <li><a href="/comic/issues/{{issue.id}}">{{issue.issue_number}}</a></li>
                {% endfor %}
              </ul>
            </td>
          </tr>
          <tr>
            <th scope="row">Data Created</th>
            <td colspan="2">{{comic.created_date}}</td>
          </tr>
          <tr>
            <th scope="row">Data Modified</th>
            <td colspan="2">{{comic.last_modified_date}}</td>
          </tr>
          <tr>
            <th scope="row">Data Version</th>
            <td colspan="2">{{comic.version}}</td>
          </tr>
        </tbody>
    </table>
  </div>
  <div class="row">
    <div>
      <a href="/comic/comics" class="btn btn-outline-primary btn-sm active" role="button" aria-pressed="true">Back to list</a>
      <a href="/comic/comic/edit/{{comic.id}}" class="btn btn-outline-primary btn-sm active" role="button" aria-pressed="true">Edit</a>
      <a href="/comic/comic/delete/{{comic.id}}" class="btn btn-outline-danger btn-sm active" role="button" aria-pressed="true">Delete</a>
    </div>
  </div>
</div>
{% endblock %}