{% load static %}
{% load reached_upload_limit %}

<div id="kt_header" class="header" data-kt-sticky="true" data-kt-sticky-name="header" data-kt-sticky-offset="{default: '200px', lg: '300px'}">
    <!-- begin::Container -->
    <div class="container-xxl d-flex align-items-center justify-content-between" id="kt_header_container">
        <!-- begin::Page title -->
        <div class="page-title d-flex flex-column align-items-start justify-content-center flex-wrap mt-n5 mt-lg-0 me-lg-2 pb-2 pb-lg-0" data-kt-swapper="true" data-kt-swapper-mode="prepend" data-kt-swapper-parent="{default: '#kt_content_container', lg: '#kt_header_container'}">
            <!-- begin::Heading -->
            <h1 class="fw-bold text-dark fw-bold my-0 fs-2"> {{ page|capfirst }} </h1>
            <!-- end::Heading -->
            <!-- begin::Breadcrumb -->
            <ul class="breadcrumb fw-semibold fs-base my-1">
                <li class="breadcrumb-item text-muted">
                    <a href="{% url 'landing:index' %}" class="fw-bold text-muted">Dashboard</a>
                </li>
                {% if page != 'dashboard' %}
                <li class="breadcrumb-item fw-bold text-dark"> {{ page|capfirst }} </li>
                {% endif %}
            </ul>
            <!-- end::Breadcrumb -->
        </div>
        <!-- end::Page title -->
        <!-- begin::Wrapper -->
        <div class="d-flex d-lg-none align-items-center ms-n2 me-2">
            <!-- begin::Aside mobile toggle -->
            <div class="btn btn-icon btn-active-icon-primary" id="kt_aside_mobile_toggle">
                <!-- begin::Icon -->
                <span class="fad fa-bars fa-lg"></span>
                <!--end::Svg Icon-->
            </div>
            <!-- end::Aside mobile toggle -->
            <!-- begin::Logo -->
            <a href="{% url 'landing:index' %}" class="d-flex align-items-center">
                <img alt="Logo" src="{% static 'images/logos/logo.png' %}" class="h-35px" />
            </a>
            <!-- end::Logo -->
        </div>
        <!-- end::Wrapper -->
        <!-- begin::Toolbar wrapper -->
        <div class="d-flex flex-shrink-0">
            {% if page == 'workspace' %}
            <!-- begin::Add New Video -->
            <div class="d-flex ms-3">
                {% if user|reached_upload_limit %}
                <button class="btn btn-flex flex-center bg-body btn-color-gray-700 btn-active-color-primary w-40px w-md-auto h-40px px-0 px-md-6" data-bs-toggle="modal" data-bs-target="#kt_modal_upload_media">
                {% else %}
                <button class="btn btn-flex flex-center bg-body btn-color-gray-700 btn-active-color-primary w-40px w-md-auto h-40px px-0 px-md-6" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="left" data-bs-dismiss="click" title="You have Retched Limited Videos For Today.">
                {% endif %}
                        <!-- begin::Icon -->
                    <span class="svg-icon svg-icon-2 svg-icon-primary me-0 me-md-2">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect opacity="0.5" x="11.364" y="20.364" width="16" height="2" rx="1" transform="rotate(-90 11.364 20.364)" fill="currentColor" />
                            <rect x="4.36396" y="11.364" width="16" height="2" rx="1" fill="currentColor" />
                        </svg>
                    </span>
                    <!-- end::Icon -->
                    <span class="d-none d-md-inline">New Project</span>
                </button>
            </div>
            <!--end::Add New Video-->
            {% endif %}
            <!-- begin::Theme mode -->
            <div class="d-flex align-items-center ms-3">
                <!-- begin::Menu toggle -->
                <a href="#" class="btn btn-icon flex-center bg-body btn-color-gray-600 btn-active-color-primary h-40px" data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">
                    <span class="fad fa-sun fa-xl theme-light-show "></span>
                    <span class="fad fa-moon fa-xl theme-dark-show"></span>
                </a>
                <!-- begin::Menu toggle -->
                <!-- begin::Menu -->
                <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-muted menu-active-bg menu-state-color fw-semibold py-4 fs-base w-175px" data-kt-menu="true" data-kt-element="theme-mode-menu">
                    <!-- begin::Menu item -->
                    <div class="menu-item px-3 my-0">
                        <a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="light">
                            <span class="menu-icon" data-kt-element="icon">
                                <span class="fad fa-sun fa-xl"></span>
                            </span>
                            <span class="menu-title">Light</span>
                        </a>
                    </div>
                    <!-- end::Menu item -->
                    <!-- begin::Menu item -->
                    <div class="menu-item px-3 my-0">
                        <a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="dark">
                            <span class="menu-icon" data-kt-element="icon">
                                <span class="fad fa-moon fa-xl"></span>
                            </span>
                            <span class="menu-title">Dark</span>
                        </a>
                    </div>
                    <!-- end::Menu item -->
                    <!-- begin::Menu item -->
                    <div class="menu-item px-3 my-0">
                        <a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="system">
                            <span class="menu-icon" data-kt-element="icon">
                                <span class="fad fa-house-day fa-xl"></span>
                            </span>
                            <span class="menu-title">System</span>
                        </a>
                    </div>
                    <!-- end::Menu item -->
                </div>
                <!-- end::Menu -->
            </div>
            <!-- end::Theme mode -->
            <!-- begin::signout -->
            <div class="d-flex align-items-center ms-3">
                <!-- begin::Menu wrapper -->
                <div class="cursor-pointer symbol symbol-30px" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-dismiss="click" title="Sign Out">
                    <a href="{% url 'accounts:signout' %}" class="btn btn-icon flex-center bg-body btn-color-gray-600 btn-active-color-primary h-40px" >
                        <span class="fad fa-sign-out fa-xl"></span>
                    </a>
                </div>
                <!-- end::Menu wrapper -->
            </div>
            <!-- end::signout -->
        </div>
        <!-- end::Toolbar wrapper -->
    </div>
    <!-- end::Container -->
</div>