{% load i18n static dashub admin_urls %}
{% get_current_language as LANGUAGE_CODE %}
{% get_current_language_bidi as LANGUAGE_BIDI %}
{% get_dashub_settings request as dashub_settings %}
{% get_theme as theme %}

<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %} data-bs-theme="{{ theme }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>{% block title %}{{ title }}{% endblock %} | {{ dashub_settings.site_title }}</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
          rel="stylesheet">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="{% static 'assets/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'assets/css/login.css' %}">

    <style>
        :root {
            --primary: {{ dashub_settings.theme_color }};
            --primary-rgb: {{ dashub_settings.theme_color_rgb }};
            --td-active-bg: {{ dashub_settings.theme_color }};
        }
    </style>

    <!-- favicons -->
    <link rel="shortcut icon" href="{{ dashub_settings.site_icon }}">
    <link rel="icon" href="{{ dashub_settings.site_icon }}" sizes="32x32">

    {% block extrastyle %} {% endblock %}
    {% block extrahead %} {% endblock %}
</head>
<body class="hold-transition dashub-login-page">
<div class="container-fluid p-0">
    <div class="row m-0">
        <div class="col-12 p-0">
            <div class="login-card login-dark">
                <div>
                    <div>
                        <a class="logo" href="/">
                            <img class="img-fluid for-dark" src="{{ dashub_settings.site_logo }}"
                                 alt="looginpage">
                        </a>
                    </div>

                    <div class="login-main">
                        {% block content %}{% endblock %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="{% static 'assets/js/main.js' %}"></script>
</body>
</html>
