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


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

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

  <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">{{comic.completed}}</td>
          </tr>
          <tr>
            <th scope="row">Works</th>
            <td colspan="2">
                {% for work in comic.comic_works %}
                    <p>
                        {{work.work_type.name}}: <a href="/comic/artists/{{work.artist.id}}">{{work.artist.name}}</a>
                    </p>
                {% endfor %}
            </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>
        </tbody>
    </table>
  </div>
</div>
{% endblock %}