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

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

{% block header_icon %}<i class="fa fa-file-text-o fa-5x"></i>{% endblock %}
{% block headline %}Incoming Tickets{% endblock %}
{% block head-message %}Feel free to pick up tickets on your own{% 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>Tickets that haven't been yet assigned to anybody</h1></div>

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

        <tbody>
    {% for ticket in tickets_unassigned %}
        <tr>
            <td><a href="{% url 'ticket_detail' pk=ticket.id %}">{{ ticket.id }}</a></td>
            <td>{{ ticket.owner.first_name }} {{ ticket.owner.last_name }}</td>
            <td>{{ ticket.title }}</td>
            <td>{{ ticket.description }}</td>
        </tr>
    {% endfor %}

    </tbody></table>


    </div>
</div>

{% endblock %}