{% extends 'layout.twig' %}

{% block title %}{{ ticket.title }}{% endblock %}

{% block content %}
  <div class="row">
    <!-- ticket content -->
    <div class="nine columns">
      <div id="ticket-header" class="row">
        <div class="columns twelve">
          <h1 class="ticket-title">{{ ticket.title }}</h1>
          <h4 class="ticket-created">Created at: <span>{{ ticket.formatCreatedAt() }}</span></h4>
          <h4 class="ticket-updated">Last updated at:  <span>{{ ticket.formatUpdatedAt() }}</span></h4>
        </div>
      </div>

      <div id="ticket-body" class="row">
        <div class="columns twelve">
          {{ ticket.render() | raw }}
        </div>
      </div>
    </div>

    <!-- ticket status column -->
    <div class="three columns">
      <ul class="ticket-attributes">
        <li class="ticket-actions">
          <ul>
            <li><a id="ticketEditLink" href="{{ url_for('ticket.edit', {ticket_id: ticket.id}) }}"><i class="fa-solid fa-pen-to-square"></i>Edit</a></li><li><a href="{{ url_for('ticket.delete', {ticket_id: ticket.id}) }}"><i class="fa-solid fa-trash"></i>Delete</a></li>
          </ul>
        </li>
        <li class="ticket-queue" data-id="{{ ticket.queue.id }}">
          Queue: <span>{{ ticket.queue.title }}</span>
        </li>
        <li class="ticket-severity">
          Severity: <span>{{ ticket.severity | capitalize }}</span>
        </li>
        <li class="ticket-status">
          Status: <span>{{ ticket.status | capitalize }}</span>
        </li>
        <li>
          Assignee(s): N/a
        </li>
      </ul>
    </div>
  </div>

  <hr>

  <!-- ticket updates -->
  <div class="row">
    <div class="twelve columns">
      <h3>Ticket comments/Updates</h3>
      {% if ticket.comments | length > 0 %}
        <ul class="comments-list">
          {% for comment in ticket.comments %}
            <li class="comment">{{ comment.render() | raw }}</li>
          {% endfor %}
        </ul>
      {% else %}
        <p>There are no comments to display at this time.</p>
      {% endif %}
    </div>
  </div>

  <hr>

  <!-- add a comment form -->
  <div class="row">
    <div class="twelve columns">
      <form id="comment-form" action="{{ url_for('comment.add') }}" method="POST" class="u-full-width">
        <label for="comment_body">Add a comment:</label>
        <textarea id="comment_body" class="u-full-width" placeholder="Add a comment..." name="comment_body"></textarea>

        <input type="hidden" name="ticket_id" value="{{ ticket.id }}">

        <input class="button-primary u-full-width" type="submit" value="Submit">
      </form>
    </div>
  </div>
{% endblock %}