{% extends "daisy/base.html" %}

{% block title %}
    <title>{{ request.site.name }} Dashboard</title>
{% endblock title %}

{% block content-header %}
    <h1 class="lg:text-2xl lg:font-light">Site Overview</h1>
{% endblock content-header %}


{% block content %}
    <!-- top stats full width -->
    <section class="stats stats-vertical xl:stats-horizontal bg-base-100 col-span-12 w-full shadow-xs">
        <div hx-get="{% url 'daisy_status_machines_by_dg' 'pie' 'available' %}"
             hx-swap="outerHTML"
             hx-trigger="load"></div>
        <div hx-get="{% url 'daisy_status_machines_by_dg' 'pie' 'inuse' %}"
             hx-swap="outerHTML"
             hx-trigger="load"></div>
        <div hx-get="{% url 'daisy_status_machines_by_dg' 'pie' 'disconnected' %}"
             hx-swap="outerHTML"
             hx-trigger="load"></div>
        <div hx-get="{% url 'daisy_status_machines_unavailable' 'card' %}"
             hx-swap="outerHTML"
             hx-trigger="load"></div>
    </section>
    <!-- /top stats full width -->


    <!-- card new here -->
    <section class="card bg-base-100 col-span-12 shadow-xs xl:col-span-4">
        <div class="card-body">
            <h1 class="card-title">
                <svg data-src="https://unpkg.com/heroicons/20/solid/sparkles.svg"
                     class="h-10 w-10">
                </svg>
                New here?
                <svg data-src="https://unpkg.com/heroicons/20/solid/users.svg"
                     class="h-6 w-6">
                </svg>
            </h1>
            <br />
            <p>
                If you're new to the platform, click the button below
                for instructions on how to sign up & connect.
            </p>
            <p>
                <div class="card-actions justify-end">
                    <button class="btn btn-warning">
                        <svg data-src="https://unpkg.com/heroicons/20/solid/rocket-launch.svg"
                             class="h-6 w-6">
                        </svg>
                        Get Started
                    </button>
                </div>
            </p>
        </div>
    </section>
    <!-- /card -->

    <!-- card questions -->
    <section class="card bg-base-100 col-span-12 shadow-xs xl:col-span-4">
        <div class="card-body">
            <h1 class="card-title">
                <svg data-src="https://unpkg.com/heroicons/20/solid/chat-bubble-left-right.svg"
                     class="h-10 w-10">
                </svg>
                Questions?
            </h1>
            <br />
            <p>
                Check out the <em>Frequently Asked Questions (FAQ)</em> or the
                documentation for
                common questions and answers.
            </p>
            <p>
                <div class="join bg-base-100 border-base-100 rounded-box w-xs">
                    <div class="card-actions border-base-100 join-item p-4">
                        <button class="btn btn-info p-4">
                            <svg data-src="https://unpkg.com/heroicons/20/solid/puzzle-piece.svg"
                                 class="h-6 w-6">
                            </svg>
                            FAQ
                        </button>
                    </div>
                    <div class="card-actions border-base-100 join-item p-4">
                        <button class="btn btn-info p-4">
                            <svg data-src="https://unpkg.com/heroicons/20/solid/swatch.svg"
                                 class="h-6 w-6">
                            </svg>
                            Docs
                        </button>
                    </div>
                </div>
            </p>
        </div>
    </section>
    <!-- /card -->

    <!-- card trouble issues -->
    <section class="card bg-base-100 col-span-12 shadow-xs xl:col-span-4">
        <div class="card-body">
            <h1 class="card-title">
                <svg data-src="https://unpkg.com/heroicons/20/solid/fire.svg"
                     class="h-10 w-10">
                </svg>
                Trouble? Issues?
            </h1>
            <br />
            <p>
                If you're experiencing trouble with using the platform,
                please send an email to the support team.
            </p>
            <p>
                <div class="card-actions justify-end">
                    <button class="btn btn-error">
                        <svg data-src="https://unpkg.com/heroicons/20/solid/envelope.svg"
                             class="h-6 w-6">
                        </svg>
                        Report Issue
                    </button>
                </div>
            </p>
        </div>
    </section>
    <!-- /card -->
{% endblock content %}