{% extends 'base.html' %}

{% block head %}
<style>
  .cover {
    width: 400px;
    border: 1px solid black;
  }

  .details > form {
    display: inline-block;
  }
</style>
{% endblock %}

{% block title %}
{{ name }}
{% endblock %}

{% block content %}

<div class="details">
  <h1>{{ name }}</h1>
  {% if session['user'] %}
    {% if is_following %}
      {% set fview = 'unfollow_view' %}
      {% set ftext = 'Following' %}
      {% set fcolor = 'red' %}
      {% set ftitle = 'Click to unfollow' %}
    {% else %}
      {% set fview = 'follow_view' %}
      {% set ftext = 'Follow' %}
      {% set fcolor = 'green' %}
      {% set ftitle = 'Click to follow' %}
    {% endif %}
    <form action="{{ url_for(fview, site=site, title_id=id) }}" method="POST">
      {{ ibutton(left_icon='bookmark', text=ftext, color=fcolor, title=ftitle) }}
    </form>
  {% endif %}
  {{ ibutton(href='https://mangadex.org/manga/' + id, right_icon='arrow-up-right', text='Source site', color='blue', title='Go to source site') }}
</div>

<img class="cover" src="https://mangadex.org/images/manga/{{ id }}.{{ cover_ext }}" alt="cover" />

<table>
  <tr>
    <th>Done</th>
    <th>Name</th>
    <th>Group</th>
  </tr>
  {% for chapter in chapters %}
  <tr>
    <td>{% if chapter['is_read'] %}yes{% endif %}</td>
    <td>
      <a href="{{ url_for('chapter_view', chapter_id=chapter['id'], site=site) }}">
        Chapter {{ chapter['number'] }}
        {% if chapter['volume'] %}Volume {{ chapter['volume'] }} {% endif %}
        {% if chapter['name'] %}- {{ chapter['name'] }} {% endif %}
      </a>
    </td>
    <td>{{ ', '.join(chapter['groups']) }}</td>
  </tr>
  {% endfor %}
</table>
{% endblock %}