{% extends "base.html" %}
{% block title %}#{{ number }} {{ title }} · {{ owner }}/{{ repository }} · tit{% endblock %}
{% block content %}
  <header class="repository-header">
    <h1><a href="/{{ owner }}/{{ repository }}">{{ owner }}/{{ repository }}</a></h1>
{% include "repository-nav.html" %}
  </header>

  <article>
    <h2>#{{ number }} {{ title }}</h2>
    <p>{{ state }} · opened by {{ author }} at <time datetime="{{ created_at }}">{{ created_at|human_time }}</time> · updated <time datetime="{{ updated_at }}">{{ updated_at|human_time }}</time></p>
    <div class="markdown">{{ body_html|safe }}</div>
  </article>

  <section aria-labelledby="comments-heading">
    <h2 id="comments-heading">Comments</h2>
{% if comments.is_empty() %}
    <p>This issue has no comments.</p>
{% else %}
{% for comment in comments %}
    <article class="comment-card" id="comment-{{ comment.id }}">
      <h3>{{ comment.author }} commented at <time datetime="{{ comment.created_at }}">{{ comment.created_at|human_time }}</time></h3>
      <div class="markdown">{{ comment.body_html|safe }}</div>
    </article>
{% endfor %}
{% endif %}
{% if comments_has_previous || comments_has_next %}
    <nav aria-label="Comment pages">
{% if comments_has_previous %}
      <a href="?comments_page={{ comments_previous_page }}&amp;timeline_page={{ timeline_page }}">Newer comments</a>
{% endif %}
{% if comments_has_next %}
      <a href="?comments_page={{ comments_next_page }}&amp;timeline_page={{ timeline_page }}">Older comments</a>
{% endif %}
    </nav>
{% endif %}
  </section>

  <section aria-labelledby="timeline-heading">
    <h2 id="timeline-heading">Timeline</h2>
    <ol>
{% for event in timeline %}
      <li value="{{ event.sequence }}">{{ event.actor }} {{ event.kind|event_name }} at <time datetime="{{ event.created_at }}">{{ event.created_at|human_time }}</time></li>
{% endfor %}
    </ol>
{% if timeline_has_previous || timeline_has_next %}
    <nav aria-label="Timeline pages">
{% if timeline_has_previous %}
      <a href="?comments_page={{ comments_page }}&amp;timeline_page={{ timeline_previous_page }}">Newer events</a>
{% endif %}
{% if timeline_has_next %}
      <a href="?comments_page={{ comments_page }}&amp;timeline_page={{ timeline_next_page }}">Older events</a>
{% endif %}
    </nav>
{% endif %}
  </section>

{% if can_comment %}
  <section aria-labelledby="comment-heading">
    <h2 id="comment-heading">Add a comment</h2>
    <form method="post" action="/{{ owner }}/{{ repository }}/issues/{{ number }}/comments">
      <input type="hidden" name="csrf" value="{{ csrf }}">
      <div class="field">
        <label for="comment-body">Comment (Markdown)</label>
        <textarea id="comment-body" name="body" maxlength="262144" rows="8" required></textarea>
      </div>
      <button type="submit">Add comment</button>
    </form>
  </section>
{% endif %}

{% if can_edit %}
  <section aria-labelledby="edit-heading">
    <h2 id="edit-heading">Edit this issue</h2>
    <form method="post" action="/{{ owner }}/{{ repository }}/issues/{{ number }}/edit">
      <input type="hidden" name="csrf" value="{{ csrf }}">
      <div class="field">
        <label for="edit-title">Title</label>
        <input id="edit-title" name="title" maxlength="200" value="{{ title }}" required>
      </div>
      <div class="field">
        <label for="edit-body">Description (Markdown)</label>
        <textarea id="edit-body" name="body" maxlength="262144" rows="10">{{ body }}</textarea>
      </div>
      <button type="submit">Save issue</button>
    </form>
    <form method="post" action="/{{ owner }}/{{ repository }}/issues/{{ number }}/state">
      <input type="hidden" name="csrf" value="{{ csrf }}">
{% if is_open %}
      <input type="hidden" name="state" value="closed">
      <button type="submit">Close issue</button>
{% else %}
      <input type="hidden" name="state" value="open">
      <button type="submit">Reopen issue</button>
{% endif %}
    </form>
  </section>
{% endif %}

{% endblock %}