{% extends "helpme/base.html" %}
{% load crispy_forms_tags %}

{% block help_content %}

      <div class="row">
        <div class="col-9">
          <h2>{{ticket.subject}}</h2>
        </div>
        <div class="col-3 text-right">
          <h4><small>Status:</small> <span class="badge badge-pill badge-primary">{{ ticket.get_status_display }}</span></h4>
        </div>
      </div>

{% if support %}

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#comment" role="tab" aria-controls="comment" aria-selected="true">Comments</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#detail" role="tab" aria-controls="detail" aria-selected="false">Details</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#edit" role="tab" aria-controls="edit" aria-selected="false">Edit</a>
  </li>
</ul>

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="comment" role="tabpanel" aria-labelledby="comment-tab">
    <div class="mt-3">
  
      <div class="row">
        <div class="col-10">
          <div class="alert alert-secondary" role="alert">
            <p>{{ ticket.description }}</p>  
          </div>
        </div>
        <div class="col-2">
          <p><b>{{ ticket.user.username }}</b><br><small>{{ ticket.created }}</small></p>
        </div>
      </div>

      {% for comment in comments %}
      <div class="row">
        <div class="col-2">
          <p><b>{{ comment.user.username }}</b><br><small>{{ comment.created }}</small></p>
        </div>
        <div class="col-10">
          <div class="alert alert-primary" role="alert">
            <p>{{ comment.content  }}</p>  
          </div>
        </div>
      </div>
      {% endfor %}

    </div>

    <hr>
    <h4>Add Comment</h4>
    <form method="post" action="{% url 'helpme-api:create-comment' ticket.uuid %}" class="text-center">
        {% csrf_token %}
        {{ comment_form|crispy }}
        <input type="submit" value="Comment" class="btn btn-success">
    </form>

  </div>

  <div class="tab-pane fade" id="detail" role="tabpanel" aria-labelledby="detail-tab">
    <div class="mt-3">

      <div class="row">
        <div class="col-sm">
          <p>
              <b>User: </b>
              {{ticket.user.username}}
          </p>
          <p>
            <b>User Meta: </b>
            <table class="table table-hover">
              <thead>
                <tr>
                  <th scope="col">attribute</th>
                  <th scope="col">value</th>
                </tr>
              </thead>
              <tbody>
                {% for key, value in ticket.user_meta.items %}  
                <tr>
                    <td>{{key}}:</td>
                    <td>{{value}}</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </p>
          <p>
              <b>Site: </b>
              {{ticket.site}}
          </p>
          <p>
              <b>Created: </b>
              {{ticket.created}}
          </p>
          <p>
              <b>Updated: </b>
              {{ticket.updated}}
          </p>
        </div>
        <div class="col-sm">
          <p>
              <b>History: </b>
          </p>
          <table class="table table-hover">
            <thead>
              <tr>
                <th scope="col">event</th>
                <th scope="col">user</th>
                <th scope="col">time</th>
                <th scope="col">notes</th>
              </tr>
            </thead>
            <tbody>
              {% for item in ticket.history %}
              <tr>
                <td>{{ item.event }}</td>
                <td>{{ item.username }}</td>
                <td>{{ item.time }}</td>
                <td>{{ item.notes }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>

        </div>
      </div>
    </div>
  </div>

  <div class="tab-pane fade" id="edit" role="tabpanel" aria-labelledby="edit-tab">
    <div class="mt-3">
      <div class="row">
        <div class="col-sm">
          <form method="post">
              {% csrf_token %}
              {{ form|crispy }}
              <input type="submit" value="Update" class="btn btn-success">
          </form>
        </div>
      </div>
    </div>
  </div>

</div>

{% else %}
<div class="row">
  <div class="col-12">
    <div class="alert alert-secondary" role="alert">
      <p>{{ ticket.description }}</p>  
    </div>
  </div>
</div>
<hr>
{% for comment in comments %}
<div class="row">
  <div class="col-2">
    <p><b>{{ comment.user.username }}</b><br><small>{{ comment.created }}</small></p>
  </div>
  <div class="col-10">
    <div class="alert alert-primary" role="alert">
      <p>{{ comment.content  }}</p>  
    </div>
  </div>
</div>
{% endfor %}
<hr>
<h2>Add Comment</h2>
<form method="post" action="{% url 'helpme-api:create-comment' ticket.uuid %}" class="text-center">
    {% csrf_token %}
    {{ comment_form|crispy }}
    <input type="submit" value="Comment" class="btn btn-success">
</form>

{% endif %}

{% endblock %}