{% extends 'panel/_base.html' %}
{% block content %}
{% include 'panel/_nav.html' %}
{% include 'panel/_flash.html' %}
<div class="container" style="margin-top:4vh;">
    <div class="row">
        <div class="col-2"></div>
        <div class="col-8">
            <h1>{{title}}</h1>
            <div class="card shadow-sm">
                <div class="card-body">
                    <table class="table table-hover table-sm">
                        <thead>
                            <tr>
                                <th scope="col">ID</th>
                                <th scope="col">Hostname</th>
                                <th scope="col">Description</th>
                                <th scope="col">Type</th>
                                <th scope="col">Owner</th>
                                <th scope="col">Allocation(s)</th>
                                <th scope="col">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in item_list %}
                            <tr>
                                <th scope="row">{{item.id}}</th>
                                <td>{{item.host_name}}</td>
                                <td>{{item.host_desc}}</td>
                                {% if item.host_type == 1 %}
                                <td><i class="bi bi-pc-display"></i> (PC)</td>
                                {% elif item.host_type == 2 %}
                                <td><i class="bi bi-server"></i> (SRV)</td>
                                {% elif item.host_type == 3 %}
                                <td><i class="bi bi-server"></i> (VM)</td>
                                {% elif item.host_type == 4 %}
                                <td><i class="bi bi-ethernet"></i> (NT)</td>
                                {% elif item.host_type == 0 %}
                                <td>Other</td>
                                {% endif %}
                                <!--
                                {% if 'WINDOWS' in item.host_os|upper or 'WS' in item.host_os|upper %}
                                <td><i class="bi bi-windows"></i> {{item.host_os}}</td>
                                {% elif 'UBUNTU' in item.host_os|upper %}
                                <td><i class="bi bi-ubuntu"></i> {{item.host_os}}</td>
                                {% elif 'MACOS' in item.host_os|upper or 'APPLE' in item.host_os|upper %}
                                <td><i class="bi bi-apple"></i> {{item.host_os}}</td>
                                {% else %}
                                <td>{{item.host_os}}</td>
                                {% endif %}
                                -->
                                <td>{{item.host_owner}}</td>
                                <td>
                                    {% if item.host_allocations != None %}
                                    {% set alloc_count = item.host_allocations.split(',')|length-1 %}
                                    {{alloc_count}}
                                    {% else %}
                                    {{item.host_allocations}}
                                    {% endif %}
                                </td>
                                <td>
                                    <button 
                                        hx-get="{{ url_for('inventory.item_view_modal',item_id=item.id) }}?page={{current_page}}" 
                                        hx-trigger="click" 
                                        hx-target="#modal-view" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#modal-view" 
                                        class="btn btn-sm btn-outline-info"
                                        style="padding-top:1px;padding-bottom:1px"
                                    > Details
                                    </button>
                                    {% if current_user.is_reado == False %}
                                    <button 
                                        hx-get="{{ url_for('inventory.item_edit_modal',item_id=item.id) }}?page={{current_page}}" 
                                        hx-trigger="click" 
                                        hx-target="#modal-edit" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#modal-edit" 
                                        class="btn btn-sm btn-outline-primary"
                                        style="padding-top:1px;padding-bottom:1px"
                                    > Edit
                                    </button>
                                    <button 
                                        hx-get="{{ url_for('inventory.item_del_modal',item_id=item.id) }}?page={{current_page}}" 
                                        hx-trigger="click" 
                                        hx-target="#modal-del" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#modal-del" 
                                        class="btn btn-sm btn-outline-danger"
                                        style="padding-top:1px;padding-bottom:1px"
                                    > Delete
                                    </button> 
                                    {% endif %} 
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-2"></div>
    </div>
</div>
<!-- MODAL -->
<div id="modal-del"
    class="modal modal-blur fade"
    style="display: none"
    aria-hidden="false"
    tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content"></div>
    </div>
</div>
<div id="modal-edit"
    class="modal modal-blur fade"
    style="display: none"
    aria-hidden="false"
    tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content"></div>
    </div>
</div>
<div id="modal-view"
    class="modal modal-blur fade"
    style="display: none"
    aria-hidden="false"
    tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content"></div>
    </div>
</div>
{% endblock %}