{% extends 'base.html.j2' %}

{% block title %}Devices{% endblock %}
{% block content_header_icon %}{% endblock %}

{% block content %}

<style>

a.status_icon {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    /*background-color: aqua;*/
}

span.status_icon {
   /* display: inline-block;*/
    height: 30px;
    line-height: 30px;
    /*background-color: aqua;*/
    width: auto;
    align-items: center;
    /*position: relative;*/
    vertical-align: middle; padding: auto; margin: 0px
}

.status_icon_ok svg {
    fill: #319c3a;
    width: 22px;
    height: 22px;
    vertical-align: middle;
    margin: 0px;
    padding: 0px;
    border: none;
    border-radius: 11px;
    /*background-color: #c7e2ca;*/
}

.status_icon_warn svg {
    fill: #cf9925;
    width: 22px;
    height: 22px;
    vertical-align: middle;
    margin: 0px;
    padding: 0px;
    border: none;
    border-radius: 11px;
    /*background-color: #ffefc5;*/
}

.status_icon_bad svg {
    fill: #cf3025;
    width: 22px;
    height: 22px;
    vertical-align: middle;
    margin: 0px;
    padding: 0px;
    border: none;
    border-radius: 11px;
    /*background-color: #ffefc5;*/
}

.status_icon_ukn svg {
    fill: #999;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 11px;
    /*background-color: #e9e9e9;*/
}

</style>
<input type="button" value="New Device" onclick="window.location='{% url 'ITAM:_device_add' %}';">
<table class="data">
    <tr>
        <th style="width: 50px;">&nbsp;</th>
        <th>Name</th>
        <th>Device Type</th>
        <th>Manufacturer</th>
        <th>Model</th>
        <th>Organization</th>
        <th>&nbsp;</th>
    </tr>
    {% for device in devices %}
    <tr>
        <td>
            <span class="status_icon status_icon_ok">
            {% if device.status == 'OK' %}
            <span class="status_icon status_icon_ok">
                {% include 'icons/inventory_status_ok.svg' %}
            </span>
            {% elif device.status == 'WARN' %}
            <span class="status_icon status_icon_warn">
                {% include 'icons/inventory_status_warning.svg' %}
            </span>
            {% elif device.status == 'BAD' %}
            <span class="status_icon status_icon_bad">
                {% include 'icons/inventory_status_bad.svg' %}
            </span>
            {% else %}
            <span class="status_icon status_icon_ukn">
                {% include 'icons/inventory_status_unknown.svg' %}
            </span>
            {% endif %}
        </td>
        <td>   
            <a href="{% url 'ITAM:_device_view' pk=device.id %}">{{ device.name }}</a>
        </td>
        <td>
        {% if device.device_type %}
            {{ device.device_type }}
        {% else %}
            -
        {% endif %}
        </td>
        <td>
        {% if device.device_model.manufacturer %}
            <a href="{% url 'Settings:_manufacturer_view' pk=device.device_model.manufacturer.id %}">{{ device.device_model.manufacturer }}</a>
        {% else %}
            -
        {% endif %}
        </td>
        <td>
        {% if device.device_model.name %}
            <a href="{% url 'Settings:_device_model_view' pk=device.device_model.id %}">{{ device.device_model.name }}</a>
        {% else %}
            -
        {% endif %}
        </td>
        <td>{% if software.is_global %}Global{% else %}{{ device.organization }}{% endif %}</td>
        <td>&nbsp;</td>
    </tr>
    {% endfor %}

</table>

<div class="pagination">
    <span class="step-links">
        {% if page_obj.has_previous %}
            <a href="?page=1">&laquo; first</a>
            <a href="?page={{ page_obj.previous_page_number }}">previous</a>
        {% endif %}

        <span class="current">
            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
        </span>

        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}">next</a>
            <a href="?page={{ page_obj.paginator.num_pages }}">last &raquo;</a>
        {% endif %}
    </span>
</div>
{% endblock %}