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

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

{% block header_icon %}<i class="fa fa-file-text-o fa-5x"></i>{% endblock %}
{% block headline %}All open Tickets{% endblock %}
{% block head-message %}Overview of all open tickets in the system{% 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' %}"><button type="button" class="btn btn-primary" style="float: right; margin-top: -50px; margin-right: 20px;">Create New Ticket</button></a>

    <div class="page-header"><h1>All open Tickets</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>Assignee</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>{% if ticket.assigned_to %}{{ ticket.assigned_to }}{% else %}---{% endif %}</td>
            <td>{{ ticket.title }}</td>
            <td>{{ ticket.description }}</td>
        </tr>
    {% endfor %}
    </tbody></table>


    </div>
</div>

{% endblock %}