{% extends "main/base.html" %}

{% block title %}Tickets - My tickets{% endblock %}

{% block header_icon %}<i class="fa fa-file-text-o fa-5x"></i>{% endblock %}
{% block headline %}My Tickets{% endblock %}
{% block head-message %}Tickets assigned to you personally{% endblock %}

{% block content %}
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug-ins/9dcbecd42ad/integration/bootstrap/3/dataTables.bootstrap.css">
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/9dcbecd42ad/integration/bootstrap/3/dataTables.bootstrap.js"></script>

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $('#assigned').dataTable();
        $('#unassigned').dataTable();
    } );
</script>

<div class="row">
    <div class="col-lg-12">

        <a href="{% url 'ticket_new' %}?next={{ request.path }}"><button type="button" class="btn btn-primary" style="float: right; margin-top: -50px; margin-right: 20px;">Create New Ticket</button></a>

        {% if tickets_waiting %}

        <div class="alert alert-danger" role="alert" style="margin-top: 20px;"><b>Collegues are waiting for your input!</b><br/><br/>

          <table id="waiting" class="table table-bordered" cellspacing="0" width="100%">
            <thead>
              <tr>
                <th>ID</th>
                <th>Status</th>
                <th>Owner</th>
                <th>Assignee</th>
                <th>Title</th>
                <th>Description</th>
              </tr>
            </thead>

            <tbody>
              {% for ticket in tickets_waiting %}
              <tr>
                <td><a href="{% url 'ticket_detail' pk=ticket.id %}">{{ ticket.id }}</a></td>
                <td>{% if ticket.status == "TODO" %}
                  <span class="label label-danger">TODO</span>
                  {% elif ticket.status == "IN PROGRESS" %}
                  <span class="label label-default">IN PROGRESS</span>
                  {% elif ticket.status == "WAITING" %}
                  <span class="label label-warning">WAITING</span>
                  {% elif ticket.status == "DONE" %}
                  <span class="label label-success">DONE</span>
                  {% else %}
                  {{ ticket.status }}
                  {% endif %}
                </td>
                <td>{{ ticket.owner }}</td>
                <td>{{ ticket.assigned_to }}</td>
                <td>{{ ticket.title }}</td>
                <td>{{ ticket.description }}</td>
              </tr>
              {% endfor %}

            </tbody>
          </table>

        </div>
        
        {% endif %}

        

    <div class="page-header"><h1>Tickets assigned to myself</h1></div>

    <table id="assigned" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
        <tr>
            <th>ID</th>
            <th>Status</th>
            <th>Owner</th>
            <th>Title</th>
            <th>Description</th>
        </tr>
        </thead>

        <tbody>
    {% for ticket in tickets %}
        <tr>
            <td><a href="{% url 'ticket_detail' pk=ticket.id %}">{{ ticket.id }}</a></td>
            <td>{% if ticket.status == "TODO" %}
                   <span class="label label-danger">TODO</span>
                {% elif ticket.status == "IN PROGRESS" %}
                   <span class="label label-default">IN PROGRESS</span>
                {% elif ticket.status == "WAITING" %}
                   <span class="label label-warning">WAITING</span>
                {% elif ticket.status == "DONE" %}
                   <span class="label label-success">DONE</span>
                {% else %}
                {{ ticket.status }}
                {% endif %}
            </td>
            <td>{{ ticket.owner }}</td>
            <td>{{ ticket.title }}</td>
            <td>{{ ticket.description }}</td>
        </tr>
    {% endfor %}


        </tbody>
    </table>


    </div>
</div>

{% endblock %}