{% extends 'dcim/device/base.html' %}
{% load static %}

{% block title %}{{ object }} - Status{% endblock %}

{% block head %}
<script type="text/javascript" src="{% static 'status.js' %}" onerror="window.location='{% url 'media_failure' %}?filename=status.js'"></script>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col col-md-6">
            <div class="card">
                <div class="card-overlay">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
                <h5 class="card-header">Device Facts</h5>
                <div class="card-body">
                    <table class="table">
                        <tr>
                            <th scope="row">Hostname</th>
                            <td id="hostname"></td>
                        </tr>
                        <tr>
                            <th scope="row">FQDN</th>
                            <td id="fqdn"></td>
                        </tr>
                        <tr>
                            <th scope="row">Vendor</th>
                            <td id="vendor"></td>
                        </tr>
                        <tr>
                            <th scope="row">Model</th>
                            <td id="model"></td>
                        </tr>
                        <tr>
                            <th scope="row">Serial Number</th>
                            <td id="serial_number" class="text-monospace"></td>
                        </tr>
                        <tr>
                            <th scope="row">OS Version</th>
                            <td id="os_version"></td>
                        </tr>
                        <tr class="align-middle">
                            <th scope="row">Uptime</th>
                            <td>
                                <div id="uptime-duration"></div>
                                <div id="uptime" class="small text-muted"></div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="col col-md-6">
            <div class="card">
                <div class="card-overlay">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
                <h5 class="card-header">Environment</h5>
                <div class="card-body">
                    <table class="table">
                        <tr id="status-cpu" class="bg-light">
                            <th colspan="2"><i class="mdi mdi-gauge"></i> CPU</th>
                        </tr>
                        <tr id="status-memory" class="bg-light">
                            <th colspan="2"><i class="mdi mdi-chip"></i> Memory</th>
                        </tr>
                        <tr id="status-temperature" class="bg-light">
                            <th colspan="2"><i class="mdi mdi-thermometer"></i> Temperature</th>
                        </tr>
                        <tr id="status-fans" class="bg-light">
                            <th colspan="2"><i class="mdi mdi-fan"></i> Fans</th>
                        </tr>
                        <tr id="status-power" class="bg-light">
                            <th colspan="2"><i class="mdi mdi-power"></i> Power</th>
                        </tr>
                        <tr class="napalm-table-placeholder d-none invisible">
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block data %}
    <span data-object-url="{% url 'dcim-api:device-napalm' pk=object.pk %}?method=get_facts&method=get_environment"></span>
{% endblock %}