{% extends "core/base.html" %}
{% block section_title %}{{ device }}{% endblock %}
{% block content %}
<div class="row">
    <div class="col">
    {% block device_details %}
        {% include "devices/device_details_block.html" %}
    {% endblock %}
    </div>

    <div class="col">
    {% block warranty %}
        {% include "devices/warranty_block.html" %}
    {% endblock %}
    </div>

    <div class="col">
    {% block ips %}
        {% include "devices/ip_block.html" %}
    {% endblock %}
    </div>
</div>

<div class="row">
    <div class="col">
        <div class="card mt-3">
            <div class="card-body">
                <h2>Host</h2>
                {% if device.host %}
                <ul>
                    <li>
                        <a href="{% url 'computer' device.host.id %}">{{ device.host }}</a>
                        <a href="{% url 'computer_update' pk %}" class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">edit</i></a>
                    </li>
                </ul>
                {% else %}
                <p><a href="{% url 'computer_update' pk %}" class="add" title="Add" data-toggle="tooltip"><i class="material-icons">add</i></a></p>
                {% endif %}

                <h2>Operating System</h2>
                {% if device.os %}
                <ul>
                    <li>
                        {{ device.os }}
                        <a href="{% url 'computer_update' pk %}" class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">edit</i></a>
                    </li>
                </ul>
                {% else %}
                    <p><a href="{% url 'computer_update' pk %}" class="add" title="Add" data-toggle="tooltip"><i class="material-icons">add</i></a></p>
                {% endif %}

                <h2>Software</h2>
                <ul>
                {% for software in software_relations %}
                    <li>{{ software.software }} <a href="{% url 'software_relation_delete' software.pk %}" class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">clear</i></a></li>
                {% endfor %}
                </ul>
                <p><a href="{% url 'software_relation_create' pk %}" class="add" title="Add" data-toggle="tooltip"><i class="material-icons">add</i></a></p>

                {% block license %}
                    {% include "licenses/license_block.html" %}
                {% endblock %}

                <h2>Backup</h2>
                <ul>
                    {% for backup in backup_relations %}
                    <li><a href="{% url 'backup' backup.id %}">{{ backup }}</a> <a href="{% url 'backup_delete' backup.pk %}" class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">clear</i></a></li>
                    {% endfor %}
                </ul>
                <p><a href="{% url 'backup_create' pk %}" class="add" title="Add" data-toggle="tooltip"><i class="material-icons">add</i></a></p>

            </div>
        </div>
    </div>

    <div class="col">
        <div class="card mt-3">
            <h2 class="card-header">Hardware</h2>
            <div class="card-body">
                    <p><b>CPUs:</b></p>
                    {% for cpu in cpu_relations %}
                        {{ cpu.amount }}x {{ cpu.cpu }} <a href="{% url 'cpu_relation_delete' cpu.pk %}" class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">clear</i></a><br>
                    {% endfor %}
                    <p><a href="{% url 'cpu_relation_create' pk %}" class="add" title="Add" data-toggle="tooltip"><i class="material-icons">add</i></a></p>

                    <p><b>GPUs:</b></p>
                    {% for gpu in gpu_relations %}
                        {{ gpu.amount }}x {{ gpu.gpu }} <a href="{% url 'gpu_relation_delete' gpu.pk %}" class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">clear</i></a><br>
                    {% endfor %}
                    <p><a href="{% url 'gpu_relation_create' pk %}" class="add" title="Add" data-toggle="tooltip"><i class="material-icons">add</i></a></p>

                    <p><b>RAM Modules:</b></p>
                    {% for module in ram_relations %}
                        {{ module.amount }}x {{ module.ram }} <a href="{% url 'ram_relation_delete' module.pk %}" class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">clear</i></a><br>
                    {% endfor %}
                    <p><a href="{% url 'ram_relation_create' pk %}" class="add" title="Add" data-toggle="tooltip"><i class="material-icons">add</i></a></p>

                    <p><b>Disks:</b></p>
                    {% for disk in disks_relations %}
                        {{ disk.amount }}x {{ disk.disk }} <a href="{% url 'disk_relation_delete' disk.pk %}" class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">clear</i></a><br>
                    {% endfor %}
                    <p><a href="{% url 'disk_relation_create' pk %}" class="add" title="Add" data-toggle="tooltip"><i class="material-icons">add</i></a></p>

                <h3>RAID</h3>
                {% for raid, disks in raid_disk_pairs.items %}
                <table class="table table-bordered">
                    <tr>
                        <td><b>Type:</b></td>
                        <td>{{ raid.raid_type }}</td>
                    </tr>
                    <tr>
                        <td><b>Usable Space</b></td>
                        <td>{{ raid.usable_space }}</td>
                    </tr>
                    {% if disks %}
                    {% for disk in disks %}
                    <tr>
                        <td><b>Disk Type</b></td>
                        <td>{{ disk.disk }}</td>
                    </tr>
                    <tr>
                        <td><b>Amount</b></td>
                        <td>{{ disk.disk_amount }}</td>
                    </tr>
                    {% endfor %}
                    {% endif %}
                </table>
                {% endfor %}
                <p><a href="{% url 'warranty_create' pk %}" class="add" title="Add" data-toggle="tooltip"><i class="material-icons">add</i></a></p>
            </div>
        </div>
    </div>
</div>
{% endblock %}