{% load humanize i18n tz dg_board dg_core %}
{# A ticket in brief, in the panel beside the board or a ticket page (peek.js); everything is changed on its page. #}
{% timezone display_timezone %}
<div class="tk-peek-head">
  <a href="{{ ticket.get_absolute_url }}" class="tk-key">{{ ticket.key }}</a>
  <span class="tk-chip"><i class="bi {{ ticket.column.category|category_icon }} tk-cat-{{ ticket.column.category }}"></i> <span class="text-truncate">{{ ticket.column.group }} / {{ ticket.column }}</span></span>
  <button type="button" class="btn btn-sm btn-outline-secondary ms-auto text-nowrap" data-tk-copy-link="{{ ticket.get_absolute_url }}" title="{% translate 'Copy a link to this ticket' %}"><i class="bi bi-link-45deg"></i> {% translate "Copy link" %}</button>
  <a class="btn btn-sm btn-primary text-nowrap" href="{{ ticket.get_absolute_url }}">{% translate "Open ticket" %}</a>
  <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="{% translate 'Close' %}" title="{% translate 'Close (Esc)' %}"></button>
</div>
<h2 class="tk-peek-title">{{ ticket.title }}</h2>

{% if ticket.is_blocked %}
  <div class="tk-blocked-banner"><i class="bi bi-slash-circle-fill"></i><div class="tk-small"><strong>{% translate "Blocked" %}</strong></div></div>
{% endif %}
{% for blocker in open_blockers %}
  <div class="tk-blocked-banner">
    <i class="bi bi-link-45deg"></i>
    <div class="tk-small">{% translate "Blocked by" %} <a href="{{ blocker.get_absolute_url }}" data-tk-peek="{% url 'dg_board:ticket_peek' blocker.key %}">{{ blocker.key }}</a> {{ blocker.title }}</div>
  </div>
{% endfor %}

<div class="tk-peek-props">
  <div class="tk-prop"><span class="tk-prop-name">{% translate "Assignee" %}</span><span class="tk-prop-value">{% avatar ticket.assignee 'xs' %} {% translate 'Unassigned' as unassigned %}{{ ticket.assignee|person:unassigned }}</span></div>
  <div class="tk-prop"><span class="tk-prop-name">{% translate "Size" %}</span><span class="tk-prop-value">{% translate 'Not estimated' as not_estimated %}{{ ticket.get_size_display|default:not_estimated }}</span></div>
  {% if labels %}
    <div class="tk-prop"><span class="tk-prop-name">{% translate "Labels" %}</span><span class="tk-prop-value">{% for label in labels %}<span class="tk-label"><span class="tk-label-dot" style="background: {{ label|label_color }}"></span>{{ label }}</span>{% endfor %}</span></div>
  {% endif %}
  <div class="tk-prop"><span class="tk-prop-name">{% translate "Creator" %}</span><span class="tk-prop-value">{% avatar ticket.creator 'xs' %} {{ ticket.creator|person }}, <span title="{{ ticket.created_at|date:'Y-m-d H:i' }}">{{ ticket.created_at|naturaltime }}</span></span></div>
  {% if ticket.closed_at %}<div class="tk-prop"><span class="tk-prop-name">{% translate "Closed" %}</span><span class="tk-prop-value" title="{{ ticket.closed_at|date:'Y-m-d H:i' }}">{{ ticket.closed_at|naturaltime }}</span></div>{% endif %}
</div>

<div class="tk-prose">
  {% if ticket.description %}{{ ticket.description|render_markdown }}{% else %}<p class="tk-muted fst-italic">{% translate "No description yet." %}</p>{% endif %}
</div>

{% if relations %}
  <h3 class="tk-section-title">{% translate "Relations" %}</h3>
  {% regroup relations by kind as kinds %}
  {% for kind in kinds %}
    <div class="tk-relation-kind">{{ kind.grouper|capfirst }}</div>
    {% for item in kind.list %}
      {% with other=item.other %}
        <div class="tk-relation">
          <i class="bi {{ other.column.category|category_icon }} tk-cat-{{ other.column.category }}" title="{{ other.column }}"></i>
          <span class="tk-key">{{ other.key }}</span>
          <a href="{{ other.get_absolute_url }}" data-tk-peek="{% url 'dg_board:ticket_peek' other.key %}"{% if other.column.category == 'done' %} class="tk-done-link"{% endif %} title="{{ other.title }}">{{ other.title }}</a>
        </div>
      {% endwith %}
    {% endfor %}
  {% endfor %}
{% endif %}

<h3 class="tk-section-title">{% translate "Comments" %}</h3>
{% for comment in comments %}
  <div class="tk-peek-comment">
    <div class="tk-small">
      {% avatar comment.author 'xs' %} <strong>{{ comment.author|person }}</strong>
      {% if comment.sets_blocked is True %}<span class="tk-chip tk-chip-blocked"><i class="bi bi-slash-circle"></i> {% translate "blocked the ticket" %}</span>{% elif comment.sets_blocked is False %}<span class="tk-chip"><i class="bi bi-check-circle tk-cat-done"></i> {% translate "unblocked the ticket" %}</span>{% endif %}
      <a href="{{ ticket.get_absolute_url }}#comment-{{ comment.pk }}" class="tk-muted text-decoration-none" title="{{ comment.created_at|date:'Y-m-d H:i' }}">{{ comment.created_at|naturaltime }}</a>
    </div>
    {% if comment.body %}<div class="tk-prose">{{ comment.body|render_markdown }}</div>{% endif %}
  </div>
{% empty %}
  <p class="tk-small tk-muted">{% translate "No comments yet." %}</p>
{% endfor %}
{% if comment_count > comments|length %}
  <a class="tk-small" href="{{ ticket.get_absolute_url }}">{% blocktranslate count count=comment_count %}The comment on the ticket page{% plural %}All {{ count }} comments on the ticket page{% endblocktranslate %}</a>
{% endif %}
{% endtimezone %}