{% load static basefilters horillafilters employee_filter i18n %} {% load tz %} {% now "Y-m-d" as current_date %}
{% load accessibility_filters %}
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">

<div id="mainNav"></div>
<!-- End of Navigation -->
<style>
    .oh-card-dashboard--moveable {
        padding: 0 10px 20px 10px;
    }

    .oh-card-dashboard:not(.tile) {
        cursor: default;
        min-height: 425px;
    }

    .oh-dashboard__movable-cards {
        padding-right: 0;
    }

    .oh-card-dashboard--moveable {
        padding-right: 0;
        padding-bottom: 10px;
    }

    .progress {
        height: 20px;
        width: 110px;
        background-color: lightgrey;
        border: 2px solid #27C20C;
        border-radius: 5px;
        overflow: hidden;
    }

    .progress-bar {
        height: 100%;
        background-color: #27C20C;
        /* Set your desired progress bar color */
    }

    .progress-text {
        width: 100%;
        text-align: center;
    }

    .oh-modal_close--custom {
        border: none;
        background: none;
        font-size: 1.5rem;
        opacity: 0.7;
        position: absolute;
        top: 25px;
        right: 15px;
    }

    .container-heading {
        font-size: 18px;
        font-weight: bold;
        padding: 10px;
    }

    .oh-kanban-card__title {
        display: block;
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid hsl(8deg 77% 56% / 40%);
        border-radius: 18px;
        margin-right: 10px;
        background-color: hsl(24.23deg 100% 58.24% / 52.94%);
    }

    .announcement_title {
        margin-bottom: 10px;
        padding: 8px;
        margin-right: 10px;
        text-decoration: none;
    }

    .page-wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Center the modal */
        width: 80%; /* Adjust the width of the modal */
        height: 80%; /* Adjust the height of the modal */
        overflow: hidden;
        z-index: 1001;
        background: transparent; /* Ensure background is transparent */
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .blurred-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        filter: blur(5px);
        opacity: 2; /* Adjust opacity level */
        z-index: 1000; /* Ensure it's behind the canvas */
    }

    #c {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%; /* Make sure the canvas fills the modal */
        height: 100%;
        z-index: 1000; /* Ensure it's above the blurred background */
        pointer-events: none; /* Ensure clicks pass through to underlying content */
    }

</style>

    <div class="oh-wrapper">

        <!-- back button -->
        <div class="d-none mt-5" id="back_button" style="width: 10%">
            <a href="{% url 'home-page' %}" class="oh-btn oh-btn--secondary oh-btn--shadow ms-3">
                <ion-icon class="me-2 md hydrated" name="arrow-back-outline" role="img"
                    aria-label="arrow-back-outline"></ion-icon>{% trans "Back" %}</a>
        </div>
        <!-- end of back button -->
        <div class="oh-dashboard row" id="dashboard" style="padding-bottom: 3.5rem;">

            {% if is_birthday %}
                <div class="page-wrapper">
                    <div class="blurred-background"></div>
                    <canvas id="c"></canvas>
                </div>
            {% endif %}

            <div class="oh-dashboard__left col-12 col-sm-12 col-md-12 col-lg-9">
                <div class="oh-dashboard__cards row">
                    {% if perms.employee.view_employee %}
                    {% if "recruitment"|app_installed %}
                    <div class="col-12 col-sm-12 col-md-6 col-lg-4">
                        <div class="oh-card-dashboard oh-card-dashboard--success tile">
                            <a href="{% url 'candidate-view' %}?joining_date={{current_date}}"
                                style="text-decoration: none">
                                <div class="oh-card-dashboard__header">
                                    <span class="oh-card-dashboard__title">{% trans "New Joining Today" %}</span>
                                </div>
                                <div class="oh-card-dashboard__body">
                                    <div class="oh-card-dashboard__counts">
                                        <span class="oh-card-dashboard__count" id="newbieToday"></span>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-6 col-lg-4">
                        <div class="oh-card-dashboard oh-card-dashboard oh-card-dashboard--warning tile">
                            <a href="{% url 'candidate-view' %}?scheduled_from={{first_day_of_week}}&scheduled_till={{last_day_of_week}}"
                                style="text-decoration: none">
                                <div class="oh-card-dashboard__header">
                                    <span class="oh-card-dashboard__title">{% trans "New Joining This Week" %}</span>
                                </div>
                                <div class="oh-card-dashboard__body">
                                    <div class="oh-card-dashboard__counts">
                                        <span class="oh-card-dashboard__count" id="newbie"></span>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    {% endif %}
                    <div class="col-12 col-sm-12 col-md-6 col-lg-4">
                        <a href="{% url 'employee-view' %}" style="text-decoration: none">
                            <div class="oh-card-dashboard oh-card-dashboard--neutral tile">
                                <div class="oh-card-dashboard__header">
                                    <span class="oh-card-dashboard__title">{% trans "Total Strength" %}</span>
                                </div>
                                <div class="oh-card-dashboard__body">
                                    <div class="oh-card-dashboard__counts">
                                        <span class="oh-card-dashboard__count" id="totalEmployeesCount"></span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    {% endif %}
                    <div class="oh-dashboard__movable-cards row mt-4" id="tileContainer">
                        {% if "attendance"|app_installed %}
                            {% if not 'offline_employees' in charts %}
                                {% if perms.employee.view_employee or request.user|is_reportingmanager %}
                                    <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
                                        id="notInYetId" hx-get="{% url 'not-in-yet' %}" hx-trigger="load">
                                        {% include "dashboard/not_in_yet.html" %}
                                    </div>
                                {% endif %}
                            {% endif %}
                            {% if not 'online_employees' in charts %}
                                {% if perms.employee.view_employee or request.user|is_reportingmanager %}
                                    <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
                                        id="notoutYetdd" hx-get="{% url 'not-out-yet' %}" hx-trigger="load">
                                        {% include "dashboard/not_out_yet.html" %}
                                    </div>
                                {% endif %}
                            {% endif %}
                        {% endif %}
                        {% if "leave"|app_installed and not 'overall_leave_chart' in charts %}
                            {% if perms.leave.view_leaverequest %}
                                <div class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable dashboardChart"
                                    id="movable1">
                                    <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
                                        <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                                            <span class="oh-card-dashboard__title">{% trans "Overall Leave" %}</span>
                                            <span class="float-end chart_close_button ms-3" role="button"
                                                data-chart="overall_leave_chart"
                                                hx-post="{% url 'employee-charts' %}?chart_id=overall_leave_chart"
                                                hx-target="#movable1" hx-swap="outerHTML">
                                                <i class="material-icons fw-lighter fs-5">close</i>
                                            </span>
                                            <select class="oh-select oh-select--sm float-end" name="" id="overAllLeaveSelect">
                                                <option value="today" selected>{% trans "Today" %}</option>
                                                <option value="week">{% trans "This Week" %}</option>
                                                <option value="month">{% trans "This Month" %}</option>
                                                <option value="year">{% trans "This Year" %}</option>
                                            </select>
                                        </div>
                                        <div class="oh-card-dashboard__body">
                                            <canvas id="overAllLeave" style="cursor: pointer" height='300' width="350"></canvas>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        {% endif %}
                        {% if "recruitment"|app_installed and perms.recruitment.view_candidate or request.user|is_stagemanager %}
                            {% if not 'hired_candidates' in charts %}
                            <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
                                id="movable2">
                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                                        <span class="oh-card-dashboard__title">{% trans "Hired Candidates" %}</span>
                                        <span class="float-end chart_close_button " role="button"
                                            data-chart="hired_candidates"
                                            hx-post="{% url 'employee-charts' %}?chart_id=hired_candidates"
                                            hx-target="#movable2" hx-swap="outerHTML">
                                            <i class="material-icons fw-lighter fs-5">close</i>
                                        </span>
                                    </div>
                                    <div class="oh-card-dashboard__body">
                                        <canvas id="hiredCandidate" style="cursor: pointer"></canvas>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                            {% if "onboarding"|app_installed and not 'onboarding_candidates' in charts %}
                            <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
                                id="movable3">
                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                                        <span class="oh-card-dashboard__title">{% trans "Candidates Started Onboarding" %}</span>
                                        <span class="float-end chart_close_button " role="button"
                                            data-chart="onboarding_candidates"
                                            hx-post="{% url 'employee-charts' %}?chart_id=onboarding_candidates"
                                            hx-target="#movable3" hx-swap="outerHTML">
                                            <i class="material-icons fw-lighter fs-5">close</i>
                                        </span>
                                    </div>
                                    <div class="oh-card-dashboard__body">
                                        <canvas id="onboardCandidate" style="cursor: pointer"></canvas>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                        {% endif %}
                        {% if "recruitment"|app_installed and not 'recruitment_analytics' in charts %}
                            {% if request.user|is_stagemanager or perms.recruitment.view_recruitment %}
                            <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
                                id="movable8">
                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                                        <span class="oh-card-dashboard__title">{% trans "Recruitment Analytics" %}</span>
                                        <span class="float-end chart_close_button " role="button"
                                            data-chart="recruitment_analytics"
                                            hx-post="{% url 'employee-charts' %}?chart_id=recruitment_analytics"
                                            hx-target="#movable8" hx-swap="outerHTML">
                                            <i class="material-icons fw-lighter fs-5">close</i>
                                        </span>
                                    </div>
                                    <div class="oh-card-dashboard__body">
                                        <canvas id="recruitmentChart1" style="cursor: pointer"></canvas>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                        {% endif %}
                        {% if "attendance"|app_installed and not 'attendance_analytic' in charts %}
                            {% if request.user|is_reportingmanager or perms.attendance.view_attendance %}
                            <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
                                id="movable4">
                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider"
                                        id="attendance_header">
                                        <div class="oh-card-dashboard__title mb-2">
                                            {% trans "Attendance Analytics" %}
                                            <span class="float-end chart_close_button " role="button"
                                                data-chart="attendance_analytic"
                                                hx-post="{% url 'employee-charts' %}?chart_id=attendance_analytic"
                                                hx-target="#movable4" hx-swap="outerHTML">
                                                <i class="material-icons fw-lighter fs-5">close</i>
                                            </span>
                                        </div>
                                        <div class="d-flex justify-content-between mb-2">
                                            <select id="type" class="oh-select" name="type" onchange="changeView(this)"
                                                style="width: 150px; padding: 3px; color: #5e5c5c">
                                                <option value="day">{% trans "Day" %}</option>
                                                <option value="weekly">{% trans "Weekly" %}</option>
                                                <option value="monthly">{% trans "Monthly" %}</option>
                                                <option value="date_range">{% trans "Date range" %}</option>
                                            </select>
                                            <span id="day_input">
                                                <input type="date" class="mb-2 float-end pointer oh-select"
                                                    id="attendance_month" onchange="changeMonth()"
                                                    style="width: 100px; color: #5e5c5c" />
                                            </span>
                                        </div>
                                    </div>
                                    <div class="oh-card-dashboard__body">
                                        <canvas id="dailyAnalytic" style="cursor: pointer"></canvas>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                        {% endif %}
                        {% if "attendance"|app_installed and not 'hours_chart' in charts %}
                            {% if request.user|is_reportingmanager or perms.attendance.view_attendance %}
                            <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
                                id="pendingHours">
                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider"
                                        id="pendingHoursHeader">
                                        <div class="oh-card-dashboard__title mb-2">
                                            {% trans "Hours Chart" %}
                                            <span class="float-end chart_close_button " role="button"
                                                data-chart="hours_chart"
                                                hx-post="{% url 'employee-charts' %}?chart_id=hours_chart"
                                                hx-target="#pendingHours" hx-swap="outerHTML">
                                                <i class="material-icons fw-lighter fs-5">close</i>
                                            </span>
                                        </div>
                                        <div class="d-flex justify-content-between mb-2">
                                            <input type="month" class="mb-2 float-end pointer oh-select"
                                                id="hourAccountMonth" onchange="dynamicMonth($(this))"
                                                style="width: 100px; color: #5e5c5c" />
                                        </div>
                                        <div class="oh-card-dashboard__body" style="height:300px">
                                            <canvas id="pendingHoursCanvas" style="cursor: pointer"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                        {% endif %}
                        {% if not 'employees_chart' in charts %}
                            {% if 'employees_chart'|feature_is_accessible:request or perms.employee.view_employee or request.user|is_reportingmanager %}
                                <div class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable dashboardChart"
                                    id="movable5">
                                    <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
                                        <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                                            <span class="oh-card-dashboard__title">{% trans "Employees Chart" %}</span>
                                            <span class="float-end chart_close_button " role="button"
                                                data-chart="employees_chart"
                                                hx-post="{% url 'employee-charts' %}?chart_id=employees_chart"
                                                hx-target="#movable5" hx-swap="outerHTML">
                                                <i class="material-icons fw-lighter fs-5">close</i>
                                            </span>
                                        </div>
                                        <div class="oh-card-dashboard__body">
                                            <canvas id="totalEmployees" style="cursor: pointer"></canvas>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        {% endif %}
                        {% if not 'department_chart' in charts %}
                            {% if 'department_chart'|feature_is_accessible:request or perms.employee.view_employee or request.user|is_reportingmanager %}
                                <div class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable dashboardChart"
                                    id="movable6">
                                    <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
                                        <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                                            <span class="oh-card-dashboard__title">{% trans "Department Chart" %}</span>
                                            <span class="float-end chart_close_button " role="button"
                                                data-chart="department_chart"
                                                hx-post="{% url 'employee-charts' %}?chart_id=department_chart"
                                                hx-target="#movable6" hx-swap="outerHTML">
                                                <i class="material-icons fw-lighter fs-5">close</i>
                                            </span>
                                        </div>
                                        <div class="oh-card-dashboard__body">
                                            <canvas id="departmentChart" style="cursor: pointer"></canvas>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        {% endif %}
                        {% if not 'gender_chart' in charts  %}
                            {% if  'gender_chart'|feature_is_accessible:request or perms.employee.view_employee or request.user|is_reportingmanager %}
                            <div class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable dashboardChart"
                                id="movable7">
                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                                        <span class="oh-card-dashboard__title">{% trans "Gender Chart" %}</span>
                                        <span class="float-end chart_close_button " role="button" data-chart="gender_chart"
                                            hx-post="{% url 'employee-charts' %}?chart_id=gender_chart"
                                            hx-target="#movable7" hx-swap="outerHTML">
                                            <i class="material-icons fw-lighter fs-5">close</i>
                                        </span>
                                    </div>
                                    <div class="oh-card-dashboard__body">
                                        <canvas id="genderChart" style="cursor: pointer"></canvas>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                        {% endif %}
                        {% if not 'objective_status' in charts and "pms"|app_installed %}
                            <div class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable dashboardChart"
                                id="movable9">
                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                                        <span class="oh-card-dashboard__title">{% trans "Objective Status" %}</span>
                                        <span class="float-end chart_close_button " role="button"
                                            data-chart="objective_status"
                                            hx-post="{% url 'employee-charts' %}?chart_id=objective_status"
                                            hx-target="#movable9" hx-swap="outerHTML">
                                            <i class="material-icons fw-lighter fs-5">close</i>
                                        </span>
                                    </div>
                                    <div class="oh-card-dashboard__body">
                                        <canvas id="objectiveChart" style="cursor: pointer"></canvas>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                        {% if "pms"|app_installed and not 'key_result_status' in charts %}
                            {% if perms.pms.view_employeekeyresult or request.user|is_reportingmanager %}
                            <div class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable dashboardChart"
                                id="movable10">
                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                                        <span class="oh-card-dashboard__title">{% trans "Key Result Status" %}</span>
                                        <span class="float-end chart_close_button " role="button"
                                            data-chart="key_result_status"
                                            hx-post="{% url 'employee-charts' %}?chart_id=key_result_status"
                                            hx-target="#movable10" hx-swap="outerHTML">
                                            <i class="material-icons fw-lighter fs-5">close</i>
                                        </span>
                                    </div>
                                    <div class="oh-card-dashboard__body">
                                        <canvas id="keyResultChart" style="cursor: pointer"></canvas>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                        {% endif %}
                        {% if "pms"|app_installed and not 'feedback_status' in charts %}
                            {% if perms.pms.view_feedback or request.user|is_reportingmanager %}
                            <div class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable dashboardChart"
                                id="movable11">
                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                                        <span class="oh-card-dashboard__title">{% trans "Feedback Status" %}</span>
                                        <span class="float-end chart_close_button " role="button"
                                            data-chart="feedback_status"
                                            hx-post="{% url 'employee-charts' %}?chart_id=feedback_status"
                                            hx-target="#movable11" hx-swap="outerHTML">
                                            <i class="material-icons fw-lighter fs-5">close</i>
                                        </span>
                                    </div>
                                    <div class="oh-card-dashboard__body">
                                        <div class="oh-card-dashboard__body">
                                            <canvas id="feedbackChart" style="cursor: pointer"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                        {% endif %}
                        {% if not 'shift_request_approve' in charts %}
                        {% if perms.base.change_shiftrequest or request.user|is_reportingmanager %}
                        <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
                            id="shiftRequestApprove">
                            <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
                                style="height:425px">
                                <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                                    <span class="oh-card-dashboard__title">{% trans "Shift Requests To Approve" %}</span>
                                    <span class="float-end chart_close_button " role="button"
                                        data-chart="shift_request_approve"
                                        hx-post="{% url 'employee-charts' %}?chart_id=shift_request_approve"
                                        hx-target="#shiftRequestApprove" hx-swap="outerHTML">
                                        <i class="material-icons fw-lighter fs-5">close</i>
                                    </span>
                                </div>
                                <div class="oh-card-dashboard__body" id="shiftRequestApproveBody" hx-get="{% url 'dashboard-shift-request' %}" hx-trigger="load" style="height:80%">
                                    {% include "request_and_approve/shift_request.html" %}
                                </div>
                            </div>
                        </div>
                        {% endif %}
                        {% endif %}
                        {% if not 'work_type_request_approve' in charts %}
                        {% if perms.base.change_worktyperequest or request.user|is_reportingmanager %}
                        <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
                            id="WorkTypeRequestApprove">
                            <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
                                style="height:425px">
                                <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                                    <span class="oh-card-dashboard__title">{% trans "Work Type Requests To Approve" %}</span>
                                    <span class="float-end chart_close_button " role="button"
                                        data-chart="work_type_request_approve"
                                        hx-post="{% url 'employee-charts' %}?chart_id=work_type_request_approve"
                                        hx-target="#WorkTypeRequestApprove" hx-swap="outerHTML">
                                        <i class="material-icons fw-lighter fs-5">close</i>
                                    </span>
                                </div>
                                <div class="oh-card-dashboard__body" id="WorkTypeRequestApproveBody"
                                    hx-get="{% url 'dashboard-work-type-request' %}" hx-trigger="load" style="height:80%">
                                    {% include "request_and_approve/work_type_request.html" %}
                                </div>
                            </div>
                        </div>
                        {% endif %}
                        {% endif %}
                        {% if "attendance"|app_installed and not 'overtime_approve' in charts %}
                            {% if perms.attendance.change_attendance or request.user|is_reportingmanager %}
                                <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
                                    id="OTApprove">
                                    <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
                                        hx-get="{% url 'dashboard-overtime-approve' %}" hx-trigger="load" style="height:425px"
                                        id="OTApproveTarget">
                                        {% include "request_and_approve/overtime_approve.html" %}
                                    </div>
                                </div>
                            {% endif %}
                        {% endif %}
                        {% if "attendance"|app_installed %}
                            {% if not 'attendance_validate' in charts %}
                                {% if perms.attendance.change_attendance or request.user|is_reportingmanager %}
                                    <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart" id="AttendanceValidate">
                                        <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
                                            style="height:425px" hx-get="{% url 'dashboard-attendance-validate' %}"
                                            hx-trigger="load" id="AttendanceValidateTarget">
                                            {% include "request_and_approve/attendance_validate.html" %}
                                        </div>
                                    </div>
                                {% endif %}
                            {% endif %}
                        {% endif %}
                        {% if "leave"|app_installed and not 'leave_request_approve' in charts %}
                            {% if perms.leave.change_leaverequest or request.user|is_reportingmanager %}
                            <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
                                id="LeaveApprove">
                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
                                    style="height:425px">
                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                                        <span class="oh-card-dashboard__title">{% trans "Leave Requests To Approve" %}</span>
                                        <span class="float-end chart_close_button " role="button"
                                            data-chart="leave_request_approve"
                                            hx-post="{% url 'employee-charts' %}?chart_id=leave_request_approve"
                                            hx-target="#LeaveApprove" hx-swap="outerHTML">
                                            <i class="material-icons fw-lighter fs-5">close</i>
                                        </span>
                                    </div>
                                    <div class="oh-card-dashboard__body" id="LeaveApproveBody"
                                        hx-get='{% url "leave-request-and-approve" %}' hx-trigger="load" style="height:80%">
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                        {% endif %}
                        {% if "leave"|app_installed and not 'leave_allocation_approve' in charts %}
                            {% if perms.leave.change_leaveallocationrequest or request.user|is_reportingmanager %}
                            <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
                                id="LeaveAllocationApprove">
                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
                                    style="height:425px">
                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                                        <span class="oh-card-dashboard__title">{% trans "Leave Allocation Request To Approve" %}</span>
                                        <span class="float-end chart_close_button " role="button"
                                            data-chart="leave_allocation_approve"
                                            hx-post="{% url 'employee-charts' %}?chart_id=leave_allocation_approve"
                                            hx-target="#LeaveAllocationApprove" hx-swap="outerHTML">
                                            <i class="material-icons fw-lighter fs-5">close</i>
                                        </span>
                                    </div>
                                    <div class="oh-card-dashboard__body" id="LeaveAllocationApproveBody"
                                        hx-get='{% url "leave-allocation-approve" %}' hx-trigger="load" style="height:80%">
                                        {% include "request_and_approve/leave_request_approve.html" %}
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                        {% endif %}
                        {% if "pms"|app_installed and not 'feedback_answer' in charts %}
                            <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
                                id="feedbackAnswer">
                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
                                    style="height:425px">
                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                                        <span class="oh-card-dashboard__title">{% trans "Feedback To Answers" %}</span>
                                        <span class="float-end chart_close_button " role="button"
                                            data-chart="feedback_answer"
                                            hx-post="{% url 'employee-charts' %}?chart_id=feedback_answer"
                                            hx-target="#feedbackAnswer" hx-swap="outerHTML">
                                            <i class="material-icons fw-lighter fs-5">close</i>
                                        </span>
                                    </div>
                                    <div class="oh-card-dashboard__body" id="feedbackAnswerBody"
                                        hx-get="{% url 'dashboard-feedback-answer' %}" hx-trigger="load" style="height:80%">
                                        {% include "request_and_approve/feedback_answer.html" %}
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                        {% if "asset"|app_installed and not 'asset_request_approve' in charts %}
                            {% if perms.asset.change_assetrequest or request.user|is_reportingmanager %}
                            <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
                                id="assetRequestApprove">
                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
                                    style="height:425px">
                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                                        <span class="oh-card-dashboard__title">{% trans "Asset Requests To Approve" %}</span>
                                        <span class="float-end chart_close_button " role="button"
                                            data-chart="asset_request_approve"
                                            hx-post="{% url 'employee-charts' %}?chart_id=asset_request_approve"
                                            hx-target="#assetRequestApprove" hx-swap="outerHTML">
                                            <i class="material-icons fw-lighter fs-5">close</i>
                                        </span>
                                    </div>
                                    <div class="oh-card-dashboard__body" id="assetRequestApproveBody"
                                        hx-get='{% url "dashboard-asset-request-approve" %}' hx-trigger="load"
                                        style="height:80%">
                                        {% include "request_and_approve/asset_requests_approve.html" %}
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="oh-dashboard__right col-12 col-sm-12 col-md-12 col-lg-3">
                <div class="oh-dashboard__events">
                    <div class="oh-dashbaord__events-reel w-100" id="birthdayContainer"></div>
                    <ul class="oh-dashboard__events-nav" id="birthdayDots">
                    </ul>
                </div>

                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent mb-3">
                    <div style="display: flex;align-items:center;justify-content:space-between;margin-right:20px">
                        <span class="oh-card-dashboard__title">{% trans "Announcements" %}</span>
                        {% if perms.base.add_announcement %}
                        <span>
                            <button id="addAnnouncement" style="display: inline-block;padding: 0px;
                        border-radius: 6px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 50px;
                        height: 28px;" class="oh-btn oh-btn--secondary-outline float-end ms-3"
                                hx-get='{% url "create-announcement" %}' hx-target="#objectCreateModalTarget"
                                hx-swap="innerHTML" data-toggle="oh-modal-toggle" data-target="#objectCreateModal"
                                title='{% trans "Create Announcement." %}'>
                                <ion-icon name="add-outline" class="m-0"></ion-icon>
                            </button>
                        </span>
                        {% endif %}
                    </div>

                    <hr>

                    <div class="oh-card-dashboard__body">
                        <div class="oh-sticky-table" style="height:400px; border:none;">
                            <div class="oh-sticky-table__table oh-table--sortable">
                                <div class="oh-sticky-table__tbody">

                                    {% if not announcement %}
                                    <div style="margin-top:30%">
                                        <div class="oh-404" style="position:revert; transform:none">
                                            <img style="width: 80px;height: 80px; margin-bottom:20px"
                                                src="{% static 'images/ui/no-announcement.svg' %}" class="oh-404__image"
                                                alt="Page not found. 404." />
                                            <h5 class="oh-404__subtitle">{% trans "No Announcements to show." %}</h5>
                                        </div>
                                    </div>
                                    {% else %}
                                    {% for i in announcement %}
                                    <div class="oh-sticky-table__tr" draggable="true">
                                        <div class="announcement_title">
                                            <a class="oh-profile oh-profile--md" data-toggle="oh-modal-toggle"
                                                style="text-decoration:none;" data-target="#objectDetailsModal"
                                                hx-get="{% url 'announcement-single-view' i.id %}"
                                                hx-target="#objectDetailsModalTarget" onclick="closeNew(this)">
                                                <div class="oh-profile__avatar mr-1">
                                                    <img src="https://ui-avatars.com/api/?name={{i.title}}&background=random"
                                                        class="oh-profile__image" />
                                                </div>
                                                <span class="oh-profile__name oh-text--dark fw-bold">
                                                    {{i.title}}
                                                </span>
                                                {% if i.created_at|date:"Y-m-d" == current_date and request.user not in i.viewed_by %}
                                                <span class="oh-profile__info-value ms-2" id="newTab"
                                                    style="background-color: hsl(8,77%,56%); color:white;
                                                    font-size: 0.7rem; padding: 3px 8px; border-radius: 15px; font-weight: 800; width:auto;">{% trans "NEW" %}
                                                </span>
                                                {% endif %}
                                            </a>
                                        </div>
                                    </div>
                                    {% endfor %}
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% if "leave"|app_installed %}
                    {% if perms.leave.view_leaverequest or request.user|is_reportingmanager %}
                        <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent mb-3">
                            <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                                <span class="oh-card-dashboard__title">{% trans "On Leave" %}</span>
                            </div>
                            <div class="oh-card-dashboard__body" hx-get="{% url 'employee-leave' %}" hx-trigger="load"></div>
                        </div>
                    {% endif %}
                {% endif %}
                {% if perms.employee.view_employeeworkinformation or request.user|is_reportingmanager %}
                    <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
                        <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                            <span class="oh-card-dashboard__title">{% trans "Employee Work Information" %}</span>
                        </div>
                        <!-- Search bar -->
                        <div class="oh-search-bar mb-3">
                            <input type="text" hx-get="{% url 'emp-workinfo-complete' %}" hx-target="#pending"
                                hx-trigger="keyup  changed dealy:0.3s" id="employeeSearch" name="search"
                                placeholder="Search Employee">
                        </div>
                        <div class="oh-card-dashboard__body" hx-get="{% url 'emp-workinfo-complete' %}" hx-trigger="load">
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="oh-modal" id="sendMailModal" role="dialog" aria-labelledby="sendMailModal" aria-hidden="true">
        <div class="oh-modal__dialog">
            <div class="oh-modal__dialog-header">
                <span class="oh-modal__dialog-title" id="sendMailModalLabel">
                    <h5>{% trans 'Send Mail' %}</h5>
                </span>
                <button class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
            </div>
            <div class="oh-modal__dialog-body" id="mail-content"></div>
        </div>
    </div>

    <div class="oh-modal" id="bigModal" role="dialog" aria-labelledby="bigModal" aria-hidden="true">
        <div class="oh-modal__dialog">
            <div class="oh-modal__dialog-header">
                <h2 class="oh-modal__dialog-title" id="">
                    {% trans "Details" %}
                </h2>
                <button class="oh-modal__close" aria-label="Close">
                    <ion-icon name="close-outline"></ion-icon>
                </button>
            </div>
            <div class="oh-modal__dialog-body oh-modal__dialog-relative" id="bigModalTarget"></div>
        </div>
    </div>


    <div class="oh-modal" id="editModal" role="dialog" aria-labelledby="editModal" aria-hidden="true">
        <div class="oh-modal__dialog">
            <div class="oh-modal__dialog-header">
                <h2 class="oh-modal__dialog-title" id="editModalLabel">
                    {% trans "Add Asset Report" %}
                </h2>
                <button type="button" class="oh-modal_close--custom"
                    onclick="$('#editModal').removeClass('oh-modal--show');">
                    <ion-icon name="close-outline" role="img" aria-label="close outline"></ion-icon>
                </button>
            </div>
            <div class="oh-modal__dialog-body" id="editModalForm"></div>
        </div>
    </div>

    {% include "announcement_single_view.html" %}


</main>

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

<script src="{% static 'dashboard/getBirthday.js' %}"></script>
<script src="{% static 'dashboard/employeeChart.js' %}"></script>

{% if "leave"|app_installed %}
<script src="{% static 'dashboard/onLeave.js' %}"></script>
{% endif %}

{% if "leave"|app_installed %}
    <script src="{% static 'dashboard/leaveChart.js' %}"></script>
{% endif %}

{% if "recruitment"|app_installed %}
    {% if perms.recruitment.view_recruitment or request.user|is_stagemanager %}
        <script src="{% static 'dashboard/recruitmentChart.js' %}"></script>
    {% endif %}
{% endif %}

{% if "attendance"|app_installed %}
    {% if perms.attendance.view_attendance or request.user|is_reportingmanager %}
        <script src="{% static 'dashboard/attendanceChart.js' %}"></script>
    {% endif %}
{% endif %}

{% if "onboarding"|app_installed %}
    <!-- onboarding dashboard -->
    <script src="{% static 'dashboard/onboardChart.js' %}"></script>
{% endif %}

{% if "pms"|app_installed %}
    <!-- PMS chart -->
    <script src="{% static 'src/dashboard/pmsChart.js' %}"></script>
{% endif %}

<!-- leave dashboard -->
<script>

    // Function to remove the div after 20 seconds
    function removeBirthdayDiv() {
        const pageWrapper = document.querySelector('.page-wrapper');
        if (pageWrapper) {
            pageWrapper.remove(); // Remove the div
            localStorage.setItem('birthdayShown', 'true'); // Set a flag in localStorage
        }
    }

    // Check localStorage to see if the div has already been shown
    if (!localStorage.getItem('birthdayShown')) {
        // If not shown before, display the div
        setTimeout(removeBirthdayDiv, 12000); // Remove after 12 seconds
    } else {
        // If already shown, remove it immediately (or don't add it at all)
        document.addEventListener("DOMContentLoaded", () => {
            const pageWrapper = document.querySelector('.page-wrapper');
            if (pageWrapper) {
                pageWrapper.remove(); // Remove if already shown
            }
        });
    }

    function setDifference(setA, setB) {
        if (setB.length > setA.length) {
            temp = setA
            setA = setB
            setB = temp
        }
        return [...setA.filter(element => !setB.includes(element))];
    }
    $(document).ready(function () {
        if (localStorage.getItem("tileOrder")) {
            var tileOrder = []
            $.each(
                $(".oh-card-dashboard--moveable"),
                function (indexInArray, valueOfElement) {
                    tileOrder.push($(valueOfElement).attr("id"));
                }
            );
            var storedIds = JSON.parse(localStorage.getItem("tileOrder"))
            var existingElements = $(".oh-card-dashboard--moveable[id]")
            var existingElementsIds = [];
            $.each(existingElements, function (indexInArray, valueOfElement) {
                existingElementsIds.push($(this).attr("id"))
            });
            var newOrderIds = [...storedIds, ...setDifference(storedIds, existingElementsIds)]
            if (storedIds.length != existingElementsIds.length) {
                localStorage.setItem("tileOrder", JSON.stringify(newOrderIds))
            }

        } else {
            localStorage.setItem("tileOrder", JSON.stringify(
                [
                    "notInYetId", "LeaveApprove", "shiftRequestApprove", "WorkTypeRequestApprove", "AttendanceValidate", "OTApprove",
                    "LeaveAllocationApprove", "feedbackAnswer", "assetRequestApprove", "movable8", "pendingHours", "notoutYetdd",
                    "movable2", "movable3", "movable4", "movable1", "movable5", "movable6", "movable7", "movable9", "movable10", "movable11"
                ]
            ))
        }
        // localStorage.setItem("tileOrder", JSON.stringify(tileOrder));

        function orderDashboardTile() {
            var orderIds = JSON.parse(localStorage.getItem("tileOrder"));
            const parentContainer = $("#tileContainer");
            if (orderIds != null) {
                const sortedElements = [];

                // Loop through the desired order of IDs
                for (const id of orderIds) {
                    const element = $("#" + id);
                    if (element.length) {
                        sortedElements.push(element);
                    }
                }

                // Clear the parent container
                if (sortedElements.length) {
                    parentContainer.empty();
                }
                // Append the sorted elements to the parent container
                for (const element of sortedElements) {
                    parentContainer.append(element);
                }
            }
        }
        orderDashboardTile();
        $(".oh-card-dashboard--moveable").mouseup(function () {
            var tileOrder = [];
            setTimeout((e) => {
                $.each(
                    $(".oh-card-dashboard--moveable"),
                    function (indexInArray, valueOfElement) {
                        tileOrder.push($(valueOfElement).attr("id"));
                    }
                );
                localStorage.setItem("tileOrder", JSON.stringify(tileOrder));
            }, 10);
        });
    });

    function closeNew(anchorElement) {
        $(anchorElement).parent().find('#newTab').hide();
    }

    var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    ctx = c.getContext('2d'),

    hw = w / 2, // half-width
    hh = h / 2,

    opts = {
        strings: ['HAPPY', 'BIRTHDAY!',"{{request.user.employee_get|escapejs}}"],
        charSize: 60,
        charSpacing: 45,
        lineHeight: 65,
        cx: w / 2,
        cy: h / 2,
        fireworkPrevPoints: 10,
        fireworkBaseLineWidth: 5,
        fireworkAddedLineWidth: 8,
        fireworkSpawnTime: 200,
        fireworkBaseReachTime: 30,
        fireworkAddedReachTime: 30,
        fireworkCircleBaseSize: 20,
        fireworkCircleAddedSize: 10,
        fireworkCircleBaseTime: 30,
        fireworkCircleAddedTime: 30,
        fireworkCircleFadeBaseTime: 10,
        fireworkCircleFadeAddedTime: 5,
        fireworkBaseShards: 20,
        fireworkAddedShards: 5,
        fireworkShardPrevPoints: 3,
        fireworkShardBaseVel: 4,
        fireworkShardAddedVel: 2,
        fireworkShardBaseSize: 10,
        fireworkShardAddedSize: 3,
        gravity: 0.1,
        upFlow: -0.1,
        letterContemplatingWaitTime: 360,
        balloonSpawnTime: 10,
        balloonBaseInflateTime: 10,
        balloonAddedInflateTime: 10,
        balloonBaseSize: 60,
        balloonAddedSize: 20,
        balloonBaseVel: 0.4,
        balloonAddedVel: 0.4,
        balloonBaseRadian: -(Math.PI / 2 - 0.5),
        balloonAddedRadian: -1,
    },
    calc = {
        totalWidth: opts.charSpacing * Math.max(opts.strings[0].length, opts.strings[1].length)
    },

    Tau = Math.PI * 2,
    TauQuarter = Tau / 4,

    letters = [];

ctx.font = opts.charSize + 'px "Lobster"';


function Letter(char, x, y) {
    this.char = char;
    this.x = x;
    this.y = y;

    this.dx = -ctx.measureText(char).width / 2;
    this.dy = +opts.charSize / 2;

    this.fireworkDy = this.y - hh;

    var hue = x / calc.totalWidth * 360;

    this.color = 'hsl(hue,80%,50%)'.replace('hue', hue);
    this.lightAlphaColor = 'hsla(hue,80%,light%,alp)'.replace('hue', hue);
    this.lightColor = 'hsl(hue,80%,light%)'.replace('hue', hue);
    this.alphaColor = 'hsla(hue,80%,50%,alp)'.replace('hue', hue);

    {% comment %} this.color = 'hsl(8, 77%, 56%)'; // Base color
    this.lightAlphaColor = 'hsla(8, 77%, 56%, 0.5)'; // Semi-transparent
    this.lightColor = 'hsla(8, 77%, 56%, 0.8)'; // Slightly transparent
    this.alphaColor = 'hsla(8, 77%, 56%, 0.6)'; // Semi-transparent {% endcomment %}


    this.reset();
}
Letter.prototype.reset = function () {
    this.phase = 'firework';
    this.tick = 0;
    this.spawned = false;
    this.spawningTime = opts.fireworkSpawnTime * Math.random() | 0;
    this.reachTime = opts.fireworkBaseReachTime + opts.fireworkAddedReachTime * Math.random() | 0;
    this.lineWidth = opts.fireworkBaseLineWidth + opts.fireworkAddedLineWidth * Math.random();
    this.prevPoints = [[0, hh, 0]];
}
Letter.prototype.step = function () {
    if (this.phase === 'firework') {
        if (!this.spawned) {
            ++this.tick;
            if (this.tick >= this.spawningTime) {
                this.tick = 0;
                this.spawned = true;
            }
        } else {
            ++this.tick;

            var linearProportion = this.tick / this.reachTime,
                harmonicProportion = Math.sin(linearProportion * TauQuarter),

                x = linearProportion * this.x,
                y = hh + harmonicProportion * this.fireworkDy;

            if (this.prevPoints.length > opts.fireworkPrevPoints)
                this.prevPoints.shift();

            this.prevPoints.push([x, y, linearProportion * this.lineWidth]);

            var lineWidthProportion = 1 / (this.prevPoints.length - 1);

            for (var i = 1; i < this.prevPoints.length; ++i) {
                var point = this.prevPoints[i],
                    point2 = this.prevPoints[i - 1];

                ctx.strokeStyle = this.alphaColor.replace('alp', i / this.prevPoints.length);
                ctx.lineWidth = point[2] * lineWidthProportion * i;
                ctx.beginPath();
                ctx.moveTo(point[0], point[1]);
                ctx.lineTo(point2[0], point2[1]);
                ctx.stroke();
            }

            if (this.tick >= this.reachTime) {
                this.phase = 'contemplate';

                this.circleFinalSize = opts.fireworkCircleBaseSize + opts.fireworkCircleAddedSize * Math.random();
                this.circleCompleteTime = opts.fireworkCircleBaseTime + opts.fireworkCircleAddedTime * Math.random() | 0;
                this.circleCreating = true;
                this.circleFading = false;

                this.circleFadeTime = opts.fireworkCircleFadeBaseTime + opts.fireworkCircleFadeAddedTime * Math.random() | 0;
                this.tick = 0;
                this.tick2 = 0;

                this.shards = [];

                var shardCount = opts.fireworkBaseShards + opts.fireworkAddedShards * Math.random() | 0,
                    angle = Tau / shardCount,
                    cos = Math.cos(angle),
                    sin = Math.sin(angle),

                    x = 1,
                    y = 0;

                for (var i = 0; i < shardCount; ++i) {
                    var x1 = x;
                    x = x * cos - y * sin;
                    y = y * cos + x1 * sin;

                    this.shards.push(new Shard(this.x, this.y, x, y, this.alphaColor));
                }
            }
        }
    } else if (this.phase === 'contemplate') {
        ++this.tick;

        if (this.circleCreating) {
            ++this.tick2;
            var proportion = this.tick2 / this.circleCompleteTime,
                harmonic = -Math.cos(proportion * Math.PI) / 2 + 0.5;

            ctx.beginPath();
            ctx.fillStyle = this.lightAlphaColor.replace('light', 50 + 50 * proportion).replace('alp', proportion);
            ctx.arc(this.x, this.y, harmonic * this.circleFinalSize, 0, Tau);
            ctx.fill();

            if (this.tick2 > this.circleCompleteTime) {
                this.tick2 = 0;
                this.circleCreating = false;
                this.circleFading = true;
            }
        } else if (this.circleFading) {
            ctx.fillStyle = this.lightColor.replace('light', 70);
            ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);

            ++this.tick2;
            var proportion = this.tick2 / this.circleFadeTime,
                harmonic = -Math.cos(proportion * Math.PI) / 2 + 0.5;

            ctx.beginPath();
            ctx.fillStyle = this.lightAlphaColor.replace('light', 100).replace('alp', 1 - harmonic);
            ctx.arc(this.x, this.y, this.circleFinalSize, 0, Tau);
            ctx.fill();

            if (this.tick2 >= this.circleFadeTime)
                this.circleFading = false;

        } else {
            ctx.fillStyle = this.lightColor.replace('light', 70);
            ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);
        }

        for (var i = 0; i < this.shards.length; ++i) {
            this.shards[i].step();

            if (!this.shards[i].alive) {
                this.shards.splice(i, 1);
                --i;
            }
        }

        if (this.tick > opts.letterContemplatingWaitTime) {
            this.phase = 'balloon';

            this.tick = 0;
            this.spawning = true;
            this.spawnTime = opts.balloonSpawnTime * Math.random() | 0;
            this.inflating = false;
            this.inflateTime = opts.balloonBaseInflateTime + opts.balloonAddedInflateTime * Math.random() | 0;
            this.size = opts.balloonBaseSize + opts.balloonAddedSize * Math.random() | 0;

            var rad = opts.balloonBaseRadian + opts.balloonAddedRadian * Math.random(),
                vel = opts.balloonBaseVel + opts.balloonAddedVel * Math.random();

            this.vx = Math.cos(rad) * vel;
            this.vy = Math.sin(rad) * vel;
        }
    } else if (this.phase === 'balloon') {
        ctx.strokeStyle = this.lightColor.replace('light', 80);

        if (this.spawning) {
            ++this.tick;
            ctx.fillStyle = this.lightColor.replace('light', 70);
            ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);

            if (this.tick >= this.spawnTime) {
                this.tick = 0;
                this.spawning = false;
                this.inflating = true;
            }
        } else if (this.inflating) {
            ++this.tick;

            var proportion = this.tick / this.inflateTime,
                x = this.cx = this.x,
                y = this.cy = this.y - this.size * proportion;

            ctx.fillStyle = this.alphaColor.replace('alp', proportion);
            ctx.beginPath();
            generateBalloonPath(x, y, this.size * proportion);
            ctx.fill();

            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x, this.y);
            ctx.stroke();

            ctx.fillStyle = this.lightColor.replace('light', 70);
            ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);

            if (this.tick >= this.inflateTime) {
                this.tick = 0;
                this.inflating = false;
            }
        } else {
            this.cx += this.vx;
            this.cy += this.vy += opts.upFlow;

            ctx.fillStyle = this.color;
            ctx.beginPath();
            generateBalloonPath(this.cx, this.cy, this.size);
            ctx.fill();

            ctx.beginPath();
            ctx.moveTo(this.cx, this.cy);
            ctx.lineTo(this.cx, this.cy + this.size);
            ctx.stroke();

            ctx.fillStyle = this.lightColor.replace('light', 70);
            ctx.fillText(this.char, this.cx + this.dx, this.cy + this.dy + this.size);

            if (this.cy + this.size < -hh || this.cx < -hw || this.cy > hw)
                this.phase = 'done';
        }
    }
}
function Shard(x, y, vx, vy, color) {
    var vel = opts.fireworkShardBaseVel + opts.fireworkShardAddedVel * Math.random();

    this.vx = vx * vel;
    this.vy = vy * vel;

    this.x = x;
    this.y = y;

    this.prevPoints = [[x, y]];
    this.color = color;

    this.alive = true;

    this.size = opts.fireworkShardBaseSize + opts.fireworkShardAddedSize * Math.random();
}
Shard.prototype.step = function () {
    this.x += this.vx;
    this.y += this.vy += opts.gravity;

    if (this.prevPoints.length > opts.fireworkShardPrevPoints)
        this.prevPoints.shift();

    this.prevPoints.push([this.x, this.y]);

    var lineWidthProportion = this.size / this.prevPoints.length;

    for (var k = 0; k < this.prevPoints.length - 1; ++k) {
        var point = this.prevPoints[k],
            point2 = this.prevPoints[k + 1];

        ctx.strokeStyle = this.color.replace('alp', k / this.prevPoints.length);
        ctx.lineWidth = k * lineWidthProportion;
        ctx.beginPath();
        ctx.moveTo(point[0], point[1]);
        ctx.lineTo(point2[0], point2[1]);
        ctx.stroke();
    }

    if (this.prevPoints[0][1] > hh)
        this.alive = false;
}
function generateBalloonPath(x, y, size) {
    ctx.moveTo(x, y);
    ctx.bezierCurveTo(x - size / 2, y - size / 2,
        x - size / 4, y - size,
        x, y - size);
    ctx.bezierCurveTo(x + size / 4, y - size,
        x + size / 2, y - size / 2,
        x, y);
}

function anim() {
    window.requestAnimationFrame(anim);

    // Clear the canvas for the next frame
    ctx.clearRect(0, 0, w, h);

    ctx.translate(hw, hh);

    var done = true;
    for (var l = 0; l < letters.length; ++l) {
        letters[l].step();
        if (letters[l].phase !== 'done') done = false;
    }

    ctx.translate(-hw, -hh);

    if (done)
        for (var l = 0; l < letters.length; ++l)
            letters[l].reset();
}

for (var i = 0; i < opts.strings.length; ++i) {
    for (var j = 0; j < opts.strings[i].length; ++j) {
        letters.push(new Letter(opts.strings[i][j],
            j * opts.charSpacing + opts.charSpacing / 2 - opts.strings[i].length * opts.charSize / 2,
            i * opts.lineHeight + opts.lineHeight / 2 - opts.strings.length * opts.lineHeight / 2));
    }
}

anim();

window.addEventListener('resize', function () {
    w = c.width = window.innerWidth;
    h = c.height = window.innerHeight;

    hw = w / 2;
    hh = h / 2;

    ctx.font = opts.charSize + 'px Verdana';
})

</script>
<script src="{% static 'build/js/dashboardDriver.js' %}"></script>

{% if not request.user.driverviewed_set.first or "dashboard" not in request.user.driverviewed_set.first.user_viewed %}
<script>
    runDriver()
</script>
{% endif %}
