{% extends "base.html" %}
{% load static %}
{% block title %}Sonus by Aureus AMS  {% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/dashboard.css' %}">
<link rel="stylesheet" href="{% static 'mod/css/card-settings.css' %}">
<link rel="stylesheet" href="{% static 'mod/css/card-play.css' %}">
<link rel="stylesheet" href="{% static 'mod/css/card-tune.css' %}">
<link rel="stylesheet" href="{% static 'mod/css/card-stats.css' %}">
<!-- <link rel="stylesheet" href="{% static 'mod/css/card-demo.css' %}"> -->
<link rel="stylesheet" href="{% static 'mod/css/card-usdemo.css' %}">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
{% endblock %}

{% block content %}

<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
    <div class="container-fluid">
        
        <div class="d-flex align-items-center">
            <img src="{% static 'img/Acouspin_Logo.png' %}" class="d-block me-2" width="50" alt="xxxxxxxxxxxxxxxxxxxx">
            <span class="navbar-brand text-general m-0"><!-- Sonus - Beta --></span>
        </div>

        <div class="d-flex d-md-none">
            
            <button class="btn btn-gradient me-2" id="toggleSidebar">
                <i class="bi bi-list"></i>
            </button>
            
            
            <button class="btn btn-danger btn-sm ms-auto" onclick="logout()">
                Logout&nbsp;<i class="bi bi-box-arrow-right"></i>
            </button>
        </div>

        
        <div class="collapse navbar-collapse" id="navbarContent">
            
            <div class="mx-auto">
                <!-- <span class="text-primary-custom">Sonus - Beta</span> -->
            </div>
            
            <div class="d-flex ms-auto">
                <button class="btn btn-danger btn-sm" onclick="logout()">
                    Logout&nbsp;<i class="bi bi-box-arrow-right"></i>
                </button>
            </div>
        </div>
    </div>
</nav>

<div class="container-fluid dashboard-container">
    
    <div class="sidebar d-none d-md-block p-3" id="sidebarContent">
        <div class="d-flex flex-column gap-3">
            <div class="card" id="side-bar-card-usdemo">
                <div class="card-body text-center">
                    <i class="bi bi-easel fs-1 icon-gradient" data-bs-toggle="tooltip" title="Ultrasound Demo"></i>
                    <h6 class="mt-2">Ultrasound Demo</h6>
                </div>
            </div>
    
            
            <div class="card" id="side-bar-card-play" disabled>  
                <div class="card-body text-center">
                    <i class="bi bi-play fs-1 text-success" data-bs-toggle="tooltip" title="play"></i>
                    <h6 class="mt-2">Start</h6>
                </div>
            </div>

            
            <div class="card" id="side-bar-card-stop" disabled>
                <div class="card-body text-center">
                    <i class="bi bi-power fs-1 text-danger" data-bs-toggle="tooltip" title="Stop"></i>
                    <h6 class="mt-2">Stop</h6>
                </div>
            </div>
    
            
            <div class="card" id="side-bar-card-tune" disabled>
                <div class="card-body text-center">
                    <i class="bi bi-diagram-3 fs-2 icon-gradient"  data-bs-toggle="tooltip" title="Tune"></i>
                    <h6 class="mt-2">Tune</h6>
                </div>
            </div>
        
            
            <div class="card" id="side-bar-card-stats" disabled>
                <div class="card-body text-center">
                    <i class="bi bi-graph-up fs-2 icon-gradient" data-bs-toggle="tooltip" title="Stats"></i>
                    <h6 class="mt-2">Stats</h6>
                </div>
            </div>

            
            <div class="card" id="side-bar-card-settings" disabled>
                <div class="card-body text-center">
                    <i class="bi bi-gear fs-2 icon-gradient" data-bs-toggle="tooltip" title="Settings"></i>
                    <h6 class="mt-2">Settings</h6>
                </div>
            </div>
        </div>

        <div class="row row-cols-3 g-3 mt-4 text-center">
            <a href="#" class="btn btn-light d-flex flex-column align-items-center justify-content-center app-button">
                <i class="bi bi-info-circle-fill fs-3 icon-secondary-custom"></i>
                <small>Info</small>
            </a>
        </div>

    </div>

    
    <div class="main-content p-3" id="main-content">
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4"></div>
    </div>
</div>

{% endblock %}
{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>
<script src="{% static 'js/dashboard.js' %}"></script>
<script src="{% static 'js/logout.js' %}"></script>

<!-- <script src="{% static 'mod/js/card-settings.js' %}"></script>
<script src="{% static 'mod/js/card-play.js' %}"></script>
<script src="{% static 'mod/js/card-tune.js' %}"></script>
<script src="{% static 'mod/js/card-stats.js' %}"></script>
<script src="{% static 'mod/js/card-stop.js' %}"></script> -->
<!-- <script src="{% static 'mod/js/card-demo.js' %}"></script> -->
<script src="{% static 'mod/js/card-usdemo.js' %}"></script>


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% endblock %}