{% extends '@EasyAdmin/layout.html.twig' %}

{% block body_class %}dashboard {{ parent() }} {% endblock %}

{% block main %}
    <header class="page-header page-header-dark bg-gradient-primary-to-secondary pb-10">
        <div class="container-xl px-4">
            <div class="page-header-content pt-4">
                <div class="row align-items-center justify-content-between">
                    <div class="col-auto mt-4">
                        <h1 class="page-header-title text-light">
                            <div class="page-header-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-activity">
                                    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
                                </svg>
                            </div>
                            At a Glance
                        </h1>
                        <div class="page-header-subtitle">{{ "now"|date('F jS, Y') }}</div>
                    </div>
                    {# <div class="col-12 col-xl-auto mt-4">
                        <div class="input-group input-group-joined border-0" style="width: 16.5rem">
                            <span class="input-group-text"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar text-primary"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg></span>
                            <input class="form-control ps-0 pointer" id="litepickerRangePlugin" placeholder="Select date range...">
                        </div>
                    </div> #}
                </div>
            </div>
        </div>
    </header>

    <div class="container-xl px-4 mt-n10">
        <div class="row">

            {# Item Breakdown #}
            <div class="col-xxl-6 col-xl-6 mb-4">
                <div class="card {# card-header-actions #} h-100">
                    <div class="card-header">
                        Asset Breakdown
                        {# <div class="dropdown no-caret">
                            <button class="btn btn-transparent-dark btn-icon dropdown-toggle" id="dropdownMenuButton" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical text-gray-500"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg></button>
                            <div class="dropdown-menu dropdown-menu-end animated--fade-in-up" aria-labelledby="dropdownMenuButton">
                                <a class="dropdown-item" href="#!">
                                    <div class="dropdown-item-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list text-gray-500"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg></div>
                                    Manage Tasks
                                </a>
                                <a class="dropdown-item" href="#!">
                                    <div class="dropdown-item-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle text-gray-500"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></div>
                                    Add New Task
                                </a>
                                <a class="dropdown-item" href="#!">
                                    <div class="dropdown-item-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus-circle text-gray-500"><circle cx="12" cy="12" r="10"></circle><line x1="8" y1="12" x2="16" y2="12"></line></svg></div>
                                    Delete Tasks
                                </a>
                            </div>
                        </div> #}
                    </div>
                    <div class="card-body">
                        <table class="table datagrid">
                            <tbody>
                            <tr>
                                <th>Total Assets</th>
                                <td class="text-right">{{ totalItems }}</td>
                            </tr>
                            <tr>
                                <th>Total Asset Replacement Cost (TARC)</th>
                                <td class="text-right">{{ totalReplacementCosts|format_currency('CAD') }}</td>
                            </tr>
                            <tr>
                                <th>Assets without a Category</th>
                                <td class="text-right">
                                    {{ breakdownByOrphanedCategory.totalItems }}
                                    {% if breakdownByOrphanedCategory.totalItems > 0 %}
                                    <a href="{{ generate_ea_url_for_entity_fqcn('App\\Entity\\Item', {
                                        'category': {
                                            'comparison': '=',
                                            'value': null
                                        }}) }}" title="View Assets without a Category">
                                        (View)
                                    </a>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>Assets without a Location</th>
                                <td class="text-right">
                                    {{ breakdownByOrphanedLocation.totalItems }}
                                    {% if breakdownByOrphanedLocation.totalItems > 0 %}
                                        <a href="{{ generate_ea_url_for_entity_fqcn('App\\Entity\\Item', {
                                            'location': {
                                                'comparison': '=',
                                                'value': null
                                            }}) }}" title="View Assets without a Location">
                                            (View)
                                        </a>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>Assets without File(s)</th>
                                <td class="text-right">{{ assetsWithoutFiles }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="card-footer position-relative">
                        <a class="float-end fw-bolder" href="{{ generate_ea_url_for_entity_fqcn('App\\Entity\\Item') }}" title="View Assets">
                            <i class="fa {{ get_icon_for_entity_fqcn('App\\Entity\\Item') }}"></i>
                            View Assets
                        </a>
                        {# <div class="d-flex align-items-center justify-content-between small text-body">
                            <a class="stretched-link text-body" href="#!">Visit Task Center</a>
                            <svg class="svg-inline--fa fa-angle-right fa-w-8" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" data-fa-i2svg=""><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg><!-- <i class="fas fa-angle-right"></i> Font Awesome fontawesome.com -->
                        </div> #}
                    </div>
                </div>
            </div>

            {# Activity Feed #}
            <div class="col-xxl-6 col-xl-6 mb-4">
                <div class="card {# card-header-actions #} h-100">
                    <div class="card-header">
                        Recent Activity
                        {# <div class="dropdown no-caret">
                            <button class="btn btn-transparent-dark btn-icon dropdown-toggle" id="dropdownMenuButton" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical text-gray-500"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg></button>
                            <div class="dropdown-menu dropdown-menu-end animated--fade-in-up" aria-labelledby="dropdownMenuButton">
                                <h6 class="dropdown-header">Filter Activity:</h6>
                                <a class="dropdown-item" href="#!"><span class="badge bg-green-soft text-green my-1">Commerce</span></a>
                                <a class="dropdown-item" href="#!"><span class="badge bg-blue-soft text-blue my-1">Reporting</span></a>
                                <a class="dropdown-item" href="#!"><span class="badge bg-yellow-soft text-yellow my-1">Server</span></a>
                                <a class="dropdown-item" href="#!"><span class="badge bg-purple-soft text-purple my-1">Users</span></a>
                            </div>
                        </div> #}
                    </div>
                    <div class="card-body">
                        <div class="timeline timeline-xs small">

                            {% for entity in recentActivity %}
                                <div class="timeline-item">
                                    <div class="timeline-item-marker">
                                        <div class="timeline-item-marker-text">{{ entity.getTimeElapsedSinceLastUpdate }}</div>
                                        <div class="timeline-item-marker-indicator">
                                            <i class="fa {{ entity.icon }}"></i>
                                        </div>
                                    </div>
                                    <div class="timeline-item-content">
                                        <a class="fw-bold text-dark"
                                           href="{{ generate_ea_url_for_entity(entity.updatedBy) }}">{{ entity.updatedBy }}</a>
                                        modified
                                        <a class="fw-bold text-dark"
                                           href="{{ generate_ea_url_for_entity(entity) }}">{{ entity }}</a>.
                                    </div>
                                </div>
                            {% endfor %}

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

            {# Breakdown by Category #}
            <div class="col-xxl-6 col-xl-6 mb-4">
                <div class="card {# card-header-actions #} h-100">
                    <div class="card-header">
                        Asset Breakdown by Category
                        {# <div class="dropdown no-caret">
                            <button class="btn btn-transparent-dark btn-icon dropdown-toggle" id="dropdownMenuButton" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical text-gray-500"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg></button>
                            <div class="dropdown-menu dropdown-menu-end animated--fade-in-up" aria-labelledby="dropdownMenuButton">
                                <a class="dropdown-item" href="#!">
                                    <div class="dropdown-item-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list text-gray-500"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg></div>
                                    Manage Tasks
                                </a>
                                <a class="dropdown-item" href="#!">
                                    <div class="dropdown-item-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle text-gray-500"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></div>
                                    Add New Task
                                </a>
                                <a class="dropdown-item" href="#!">
                                    <div class="dropdown-item-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus-circle text-gray-500"><circle cx="12" cy="12" r="10"></circle><line x1="8" y1="12" x2="16" y2="12"></line></svg></div>
                                    Delete Tasks
                                </a>
                            </div>
                        </div> #}
                    </div>
                    <div class="card-body">
                        {% for data in breakdownByCategory %}
                            {% set category = data[0] %}
                            {% set tarcPercentage = ((data.replacementCosts / totalReplacementCosts) * 100)|number_format %}
                            <h4 class="small">
                                {# @todo - link to list with filters set to show category #}
                                <a href="{{ generate_ea_url_for_entity(category) }}"
                                   title="View details for {{ category.name }}">
                                    {{ category.name }}
                                </a>
                                <span class="small">
                                    (TARC - {{ data.replacementCosts|format_currency('CAD') }})
                                </span>
                                <span class="float-end">
                                    <span class="fw-bold">{{ data.totalItems }} assets</span>
                                    <span class="small">({{ ((data.totalItems/totalItems) * 100)|number_format }}% of TA)</span>
                                </span>
                            </h4>
                            <div class="progress mb-4">
                                <div class="progress-bar bg-success" role="progressbar"
                                     style="width: {{ tarcPercentage }}%" aria-valuenow="{{ tarcPercentage }}"
                                     aria-valuemin="0" aria-valuemax="100">
                                    ({{ tarcPercentage }}% of TARC)
                                </div>
                            </div>
                        {% endfor %}

                        {# Orphans #}
                        {% if breakdownByOrphanedCategory.totalItems > 0 %}
                            {% set tarcPercentage = ((breakdownByOrphanedCategory.replacementCosts / totalReplacementCosts) * 100)|number_format %}
                            <h4 class="small">
                                {# @todo - link to list with filters set to show orphans #}
                                {# <a href="!#"
                                   title="View uncategorized assets"> #}
                                Uncategorized
                                {# </a> #}
                                <span class="small">
                                    (TARC - {{ breakdownByOrphanedCategory.replacementCosts|format_currency('CAD') }})
                                </span>
                                <span class="float-end">
                                    <span class="fw-bold">{{ breakdownByOrphanedCategory.totalItems }} assets</span>
                                    <span class="small">({{ ((breakdownByOrphanedCategory.totalItems / totalItems) * 100)|format_number }}% of TA)</span>
                                </span>
                            </h4>
                            <div class="progress mb-4">
                                <div class="progress-bar bg-success" role="progressbar"
                                     style="width: {{ tarcPercentage }}%" aria-valuenow="{{ tarcPercentage }}"
                                     aria-valuemin="0" aria-valuemax="200">
                                    ({{ tarcPercentage }}% of TARC
                                </div>
                            </div>
                        {% endif %}
                    </div>
                    <div class="card-footer position-relative">
                        <ul class="small list-inline text-black-50">
                            <li class="list-inline-item">TA - Total Assets</li>
                            <li class="list-inline-item">TARC - Total Asset Replacement Cost</li>
                        </ul>
                        {# <div class="d-flex align-items-center justify-content-between small text-body">
                            <a class="stretched-link text-body" href="#!">Visit Task Center</a>
                            <svg class="svg-inline--fa fa-angle-right fa-w-8" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" data-fa-i2svg=""><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg><!-- <i class="fas fa-angle-right"></i> Font Awesome fontawesome.com -->
                        </div> #}
                    </div>
                </div>
            </div>

            {# Breakdown by Location #}
            <div class="col-xxl-6 col-xl-6 mb-4">
                <div class="card {# card-header-actions #} h-100">
                    <div class="card-header">
                        Asset Breakdown by Location
                        {# <div class="dropdown no-caret">
                            <button class="btn btn-transparent-dark btn-icon dropdown-toggle" id="dropdownMenuButton" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical text-gray-500"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg></button>
                            <div class="dropdown-menu dropdown-menu-end animated--fade-in-up" aria-labelledby="dropdownMenuButton">
                                <a class="dropdown-item" href="#!">
                                    <div class="dropdown-item-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list text-gray-500"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg></div>
                                    Manage Tasks
                                </a>
                                <a class="dropdown-item" href="#!">
                                    <div class="dropdown-item-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle text-gray-500"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></div>
                                    Add New Task
                                </a>
                                <a class="dropdown-item" href="#!">
                                    <div class="dropdown-item-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus-circle text-gray-500"><circle cx="12" cy="12" r="10"></circle><line x1="8" y1="12" x2="16" y2="12"></line></svg></div>
                                    Delete Tasks
                                </a>
                            </div>
                        </div> #}
                    </div>
                    <div class="card-body">
                        {% for data in breakdownByLocation %}
                            {% set location = data[0] %}
                            {% set tarcPercentage = ((data.replacementCosts / totalReplacementCosts) * 100)|number_format %}
                            <h4 class="small">
                                <a href="{{ generate_ea_url_for_entity(location) }}"
                                   title="View details for {{ location.name }}">
                                    {{ location.name }}
                                </a>
                                <span class="small">
                                    (TARC - {{ data.replacementCosts|format_currency('CAD') }})
                                </span>
                                <span class="float-end">
                                    <span class="fw-bold">{{ data.totalItems }} assets</span>
                                    <span class="small">({{ ((data.totalItems/totalItems) * 100)|number_format }}% of TA)</span>
                                </span>
                            </h4>
                            <div class="progress mb-4">
                                <div class="progress-bar bg-success" role="progressbar"
                                     style="width: {{ tarcPercentage }}%" aria-valuenow="{{ tarcPercentage }}"
                                     aria-valuemin="0" aria-valuemax="100">
                                    ({{ tarcPercentage }}% of TARC)
                                </div>
                            </div>
                        {% endfor %}

                        {# Orphans #}
                        {% if breakdownByOrphanedLocation.totalItems > 0 %}
                            {% set trcPercentage = ((breakdownByOrphanedLocation.replacementCosts / totalReplacementCosts) * 100)|number_format %}
                            <h4 class="small">
                                {# @todo - link to list with filters set to show orphans #}
                                {# <a href="!#"
                                   title="View uncategorized assets"> #}
                                Uncategorized
                                {# </a> #}
                                <span class="small">
                                    (TARC - {{ breakdownByOrphanedLocation.replacementCosts|format_currency('CAD') }})
                                </span>
                                <span class="float-end">
                                        <span class="fw-bold">{{ breakdownByOrphanedLocation.totalItems }} assets</span>
                                        <span class="small">({{ ((breakdownByOrphanedLocation.totalItems / totalItems) * 100)|format_number }}% of TA)</span>
                                    </span>
                            </h4>
                            <div class="progress mb-4">
                                <div class="progress-bar bg-success" role="progressbar"
                                     style="width: {{ trcPercentage }}%" aria-valuenow="{{ trcPercentage }}"
                                     aria-valuemin="0" aria-valuemax="200">
                                    ({{ trcPercentage }}% of TARC)
                                </div>
                            </div>
                        {% endif %}
                    </div>
                    <div class="card-footer position-relative">
                        <ul class="small list-inline text-black-50">
                            <li class="list-inline-item">TA - Total Assets</li>
                            <li class="list-inline-item">TARC - Total Asset Replacement Cost</li>
                        </ul>

                        {# <div class="d-flex align-items-center justify-content-between small text-body">
                            <a class="stretched-link text-body" href="#!">Visit Task Center</a>
                            <svg class="svg-inline--fa fa-angle-right fa-w-8" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" data-fa-i2svg=""><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg><!-- <i class="fas fa-angle-right"></i> Font Awesome fontawesome.com -->
                        </div> #}
                    </div>
                </div>
            </div>


        </div>
{#

        <!-- Example Colored Cards for Dashboard Demo-->
        <div class="row">
            <div class="col-lg-6 col-xl-3 mb-4">
                <div class="card bg-primary text-white h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="me-3">
                                <div class="text-white-75 small">Earnings (Monthly)</div>
                                <div class="text-lg fw-bold">$40,000</div>
                            </div>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                 stroke-linejoin="round" class="feather feather-calendar feather-xl text-white-50">
                                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                                <line x1="16" y1="2" x2="16" y2="6"></line>
                                <line x1="8" y1="2" x2="8" y2="6"></line>
                                <line x1="3" y1="10" x2="21" y2="10"></line>
                            </svg>
                        </div>
                    </div>
                    <div class="card-footer d-flex align-items-center justify-content-between small">
                        <a class="text-white stretched-link" href="#!">View Report</a>
                        <div class="text-white">
                            <svg class="svg-inline--fa fa-angle-right fa-w-8" aria-hidden="true" focusable="false"
                                 data-prefix="fas" data-icon="angle-right" role="img" xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 256 512" data-fa-i2svg="">
                                <path fill="currentColor"
                                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path>
                            </svg><!-- <i class="fas fa-angle-right"></i> Font Awesome fontawesome.com --></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-xl-3 mb-4">
                <div class="card bg-warning text-white h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="me-3">
                                <div class="text-white-75 small">Earnings (Annual)</div>
                                <div class="text-lg fw-bold">$215,000</div>
                            </div>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                 stroke-linejoin="round" class="feather feather-dollar-sign feather-xl text-white-50">
                                <line x1="12" y1="1" x2="12" y2="23"></line>
                                <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="card-footer d-flex align-items-center justify-content-between small">
                        <a class="text-white stretched-link" href="#!">View Report</a>
                        <div class="text-white">
                            <svg class="svg-inline--fa fa-angle-right fa-w-8" aria-hidden="true" focusable="false"
                                 data-prefix="fas" data-icon="angle-right" role="img" xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 256 512" data-fa-i2svg="">
                                <path fill="currentColor"
                                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path>
                            </svg><!-- <i class="fas fa-angle-right"></i> Font Awesome fontawesome.com --></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-xl-3 mb-4">
                <div class="card bg-success text-white h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="me-3">
                                <div class="text-white-75 small">Task Completion</div>
                                <div class="text-lg fw-bold">24</div>
                            </div>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                 stroke-linejoin="round" class="feather feather-check-square feather-xl text-white-50">
                                <polyline points="9 11 12 14 22 4"></polyline>
                                <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="card-footer d-flex align-items-center justify-content-between small">
                        <a class="text-white stretched-link" href="#!">View Tasks</a>
                        <div class="text-white">
                            <svg class="svg-inline--fa fa-angle-right fa-w-8" aria-hidden="true" focusable="false"
                                 data-prefix="fas" data-icon="angle-right" role="img" xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 256 512" data-fa-i2svg="">
                                <path fill="currentColor"
                                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path>
                            </svg><!-- <i class="fas fa-angle-right"></i> Font Awesome fontawesome.com --></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-xl-3 mb-4">
                <div class="card bg-danger text-white h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="me-3">
                                <div class="text-white-75 small">Pending Requests</div>
                                <div class="text-lg fw-bold">17</div>
                            </div>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                 stroke-linejoin="round"
                                 class="feather feather-message-circle feather-xl text-white-50">
                                <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="card-footer d-flex align-items-center justify-content-between small">
                        <a class="text-white stretched-link" href="#!">View Requests</a>
                        <div class="text-white">
                            <svg class="svg-inline--fa fa-angle-right fa-w-8" aria-hidden="true" focusable="false"
                                 data-prefix="fas" data-icon="angle-right" role="img" xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 256 512" data-fa-i2svg="">
                                <path fill="currentColor"
                                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path>
                            </svg><!-- <i class="fas fa-angle-right"></i> Font Awesome fontawesome.com --></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Example Charts for Dashboard Demo-->
        <div class="row">
            <div class="col-xl-6 mb-4">
                <div class="card card-header-actions h-100">
                    <div class="card-header">
                        Earnings Breakdown
                        <div class="dropdown no-caret">
                            <button class="btn btn-transparent-dark btn-icon dropdown-toggle"
                                    id="areaChartDropdownExample" type="button" data-bs-toggle="dropdown"
                                    aria-haspopup="true" aria-expanded="false">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-more-vertical text-gray-500">
                                    <circle cx="12" cy="12" r="1"></circle>
                                    <circle cx="12" cy="5" r="1"></circle>
                                    <circle cx="12" cy="19" r="1"></circle>
                                </svg>
                            </button>
                            <div class="dropdown-menu dropdown-menu-end animated--fade-in-up"
                                 aria-labelledby="areaChartDropdownExample">
                                <a class="dropdown-item" href="#!">Last 12 Months</a>
                                <a class="dropdown-item" href="#!">Last 30 Days</a>
                                <a class="dropdown-item" href="#!">Last 7 Days</a>
                                <a class="dropdown-item" href="#!">This Month</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#!">Custom Range</a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="chart-area">
                            <div class="chartjs-size-monitor">
                                <div class="chartjs-size-monitor-expand">
                                    <div class=""></div>
                                </div>
                                <div class="chartjs-size-monitor-shrink">
                                    <div class=""></div>
                                </div>
                            </div>
                            <canvas id="myAreaChart" style="display: block; width: 639px; height: 240px;"
                                    class="chartjs-render-monitor" width="639" height="240"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 mb-4">
                <div class="card card-header-actions h-100">
                    <div class="card-header">
                        Monthly Revenue
                        <div class="dropdown no-caret">
                            <button class="btn btn-transparent-dark btn-icon dropdown-toggle"
                                    id="areaChartDropdownExample" type="button" data-bs-toggle="dropdown"
                                    aria-haspopup="true" aria-expanded="false">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-more-vertical text-gray-500">
                                    <circle cx="12" cy="12" r="1"></circle>
                                    <circle cx="12" cy="5" r="1"></circle>
                                    <circle cx="12" cy="19" r="1"></circle>
                                </svg>
                            </button>
                            <div class="dropdown-menu dropdown-menu-end animated--fade-in-up"
                                 aria-labelledby="areaChartDropdownExample">
                                <a class="dropdown-item" href="#!">Last 12 Months</a>
                                <a class="dropdown-item" href="#!">Last 30 Days</a>
                                <a class="dropdown-item" href="#!">Last 7 Days</a>
                                <a class="dropdown-item" href="#!">This Month</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#!">Custom Range</a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="chart-bar">
                            <div class="chartjs-size-monitor">
                                <div class="chartjs-size-monitor-expand">
                                    <div class=""></div>
                                </div>
                                <div class="chartjs-size-monitor-shrink">
                                    <div class=""></div>
                                </div>
                            </div>
                            <canvas id="myBarChart" style="display: block; width: 639px; height: 240px;"
                                    class="chartjs-render-monitor" width="639" height="240"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
#}

    </div>

{% endblock %}