{% extends 'base.html' %}

{% block title %}
Chapter {{ num_major }}{% if num_minor %}.{{ num_minor }}{% endif %}
{% if name %} - {{ name }}{% endif %}
{% endblock %}

{% block head %}
<meta property="og:title" content="{{ title['name'] }} {{ self.title() }} - Pytaku" />
<meta property="og:image" content="{{ title['cover'] }}" />
<meta property="og:description" content="{{ title['descriptions'] | join('\n') }}" />

{% if next_chapter %}
<link rel="prefetch" href="{{ url_for('chapter_view', site=site, title_id=title_id, chapter_id=next_chapter['id'])}}">
{% endif %}

<style>
  html {
    background-color: #444;
    color: white;
  }

  .content {
    padding: var(--body-padding) 0;
    text-align: center;
  }

  .cover {
    width: 400px;
    border: 1px solid black;
  }

  .pages img {
    display: block;
    margin: 0 auto .7rem auto;
  }
  .pages.webtoon img {
    margin: 0 auto;
  }

  .buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
  .buttons > * {
    margin-right: .5rem;
    margin-top: .2rem;
    margin-bottom: .2rem;
  }
  .buttons > *:last-child {
    margin-right: 0;
  }
</style>

{% endblock %}

{% block content %}

<h1>{{ self.title() }}</h1>

{# Put buttons in block to reuse later in this same template #}
{% block buttons %}
<div class="buttons">
  {% if prev_chapter %}
  {{ ibutton(href=url_for('chapter_view', site=site, title_id=title_id, chapter_id=prev_chapter['id']), left_icon='chevrons-left', text='Prev') }}
  {% else %}
  {{ ibutton(left_icon='chevrons-left', text='Prev', disabled=True) }}
  {% endif %}

  {{ ibutton(href=url_for('title_view', title_id=title_id, site=site), left_icon='list', text='Chapter list', color='blue') }}

  {% if next_chapter %}

    {% set next_url = url_for('chapter_view', site=site, title_id=title_id, chapter_id=next_chapter['id']) %}
    {% if session['user'] %}
      {% set next_url = next_url + '?has_read=' + id %}
    {% endif %}
    {{ ibutton(href=next_url, right_icon='chevrons-right', text='Next') }}

  {% else %}
    {% if session['user'] %}
    {{ ibutton(href=url_for('title_view', site=site, title_id=title_id) + '?has_read=' + id, text='✓ Finish reading', color='green') }}
    {% else %}
    {{ ibutton(right_icon='chevrons-right', text='Next', disabled=True) }}
    {% endif %}
  {% endif %}

</div>
{% endblock %}

<div class="pages {% if is_webtoon %}webtoon{% endif %}">
  {% for page in pages %}
  <img src="{{ page }}" crossorigin="anonymous" referrerpolicy="no-referrer"/>
  {% endfor %}
</div>

{{ self.buttons() }}

{% endblock %}
