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

{% block title %}Tickets - Archive{% endblock %}

{% block header_icon %}<i class="fa fa-file-text-o fa-5x"></i>{% endblock %}
{% block headline %}Archive{% endblock %}
{% block head-message %}Overview of all closed 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() {
        $('#archived').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>Closed Tickets</h1></div>

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

        <tbody>
    {% for ticket in tickets %}
        <tr>
            <td><a href="{% url 'ticket_detail' pk=ticket.id %}">{{ ticket.id }}</a></td>
            <td>{{ ticket.owner }}</td>
            <td>{{ ticket.assigned_to }}</td>
            <td>{{ ticket.title }}</td>
            <td>{{ ticket.description }}</td>
            <td>{{ ticket.closed_date|date:"d.m.Y, G:i" }}</td>
        </tr>
    {% endfor %}
    </tbody></table>


    </div>
</div>

{% endblock %}