{% extends 'layout.twig' %}

{% block title %}Home{% 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 {{ ticket.created_at }}</h4>
          <h4 class="ticket-updated">Last updated at {{ ticket.updated_at }}</h4>
        </div>
      </div>

      <div id="ticket-body" class="row">
        <div class="columns twelve">
          <p>{{ ticket.body }}</p>
        </div>
      </div>
    </div>

    <!-- ticket status column -->
    <div class="three columns">
      <ul class="ticket-status">
        <li class="ticket-actions">
          <ul>
            <li><a 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.edit', {ticket_id: ticket.id}) }}"><i class="fa-solid fa-trash"></i>Delete</a></li>
          </ul>
        </li>
        <li>
          Severity {{ ticket.severity | capitalize }}
        </li>
        <li>
          Status: {{ ticket.status | capitalize }}
        </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>
      <p>There are no comments to display at this time.</p>
    </div>
  </div>
{% endblock %}