<?php
$session = session();
$settings = $session->get('settings');
?>
<!DOCTYPE html>

<html
        lang="<?= $settings['default_language'] ?? 'es' ?>"
        class="h-100"
        class="dark-style customizer-hide"
        dir="ltr"
        data-theme="theme-default"
        data-assets-path="<?= site_url('themes/vuexy/') ?>"
        data-template="vertical-menu-template-no-customizer"
>

<head>
    <meta charset="utf-8">
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />
    <title><?= $this->renderSection('title') ?></title>

    <?php
    $baseImgUrl = site_url('themes/vuexy/img/favicon');
    $baseThemeUrl = site_url('themes/vuexy');
    ?>
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="<?= $baseImgUrl . '/favicon.ico' ?>"/>
    <link rel="apple-touch-icon" sizes="57x57" href="<?= $baseImgUrl . '/apple-icon-57x57.png' ?>">
    <link rel="apple-touch-icon" sizes="60x60" href="<?= $baseImgUrl . '/apple-icon-60x60.png' ?>">
    <link rel="apple-touch-icon" sizes="72x72" href="<?= $baseImgUrl . '/apple-icon-72x72.png' ?>">
    <link rel="apple-touch-icon" sizes="76x76" href="<?= $baseImgUrl . '/apple-icon-76x76.png' ?>">
    <link rel="apple-touch-icon" sizes="114x114" href="<?= $baseImgUrl . '/apple-icon-114x114.png' ?>">
    <link rel="apple-touch-icon" sizes="120x120" href="<?= $baseImgUrl . '/apple-icon-120x120.png' ?>">
    <link rel="apple-touch-icon" sizes="144x144" href="<?= $baseImgUrl . '/apple-icon-144x144.png' ?>">
    <link rel="apple-touch-icon" sizes="152x152" href="<?= $baseImgUrl . '/apple-icon-152x152.png' ?>">
    <link rel="apple-touch-icon" sizes="180x180" href="<?= $baseImgUrl . '/apple-icon-180x180.png' ?>">
    <link rel="icon" type="image/png" sizes="192x192" href="<?= $baseImgUrl . '/android-icon-192x192.png' ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="<?= $baseImgUrl . '/favicon-32x32.png' ?>">
    <link rel="icon" type="image/png" sizes="96x96" href="<?= $baseImgUrl . '/favicon-96x96.png' ?>">
    <link rel="icon" type="image/png" sizes="16x16" href="<?= $baseImgUrl . '/favicon-16x16.png' ?>">
    <link rel="manifest" href="<?= $baseImgUrl . '/manifest.json' ?>">

    <!-- Fonts -->
    <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=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
            rel="stylesheet"
    />

    <!-- Icons -->
    <link rel="stylesheet" href="<?= $baseThemeUrl . '/vendor/fonts/fontawesome.css' ?>"/>
    <link rel="stylesheet" href="<?= $baseThemeUrl . '/vendor/fonts/tabler-icons.css' ?>"/>
    <link rel="stylesheet" href="<?= $baseThemeUrl . '/vendor/fonts/flag-icons.css' ?>"/>

    <!-- Core CSS -->
    <link rel="stylesheet" href="<?= $baseThemeUrl . '/vendor/css/rtl/core-dark.css' ?>"/>
    <link rel="stylesheet" href="<?= $baseThemeUrl . '/vendor/css/rtl/theme-default-dark.css' ?>"/>
    <link rel="stylesheet" href="<?= $baseThemeUrl . '/css/safekat.css' ?>"/>

    <!-- Vendors CSS -->
    <link rel="stylesheet" href="<?= $baseThemeUrl . '/vendor/libs/perfect-scrollbar/perfect-scrollbar.css' ?>"/>
    <link rel="stylesheet" href="<?= $baseThemeUrl . '/vendor/libs/node-waves/node-waves.css' ?>"/>
    <link rel="stylesheet" href="<?= $baseThemeUrl . '/vendor/libs/typeahead-js/typeahead.css' ?>"/>
    <link rel="stylesheet" href="<?= $baseThemeUrl . '/vendor/libs/toastr/toastr.css' ?>"/>

    <!-- Vendor -->
    <link rel="stylesheet" href="<?= $baseThemeUrl . '/vendor/libs/formvalidation/dist/css/formValidation.min.css' ?>"/>

    <!-- Page CSS -->
    <link rel="stylesheet" href="<?= $baseThemeUrl . '/vendor/css/pages/page-auth.css' ?>"/>
    <!-- Helpers -->
    <script src="<?= $baseThemeUrl . '/vendor/js/helpers.js' ?>"></script>
    <script src="<?= $baseThemeUrl . '/js/config.js' ?>"></script>
</head>
<body>

<?= $this->renderSection('main') ?>


<?= $this->renderSection('pageScripts') ?>

<!-- Required vendors -->
<!-- Core JS -->
<script src="<?= $baseThemeUrl . '/vendor/libs/jquery/jquery.js' ?>"></script>
<script src="<?= $baseThemeUrl . '/vendor/libs/popper/popper.js' ?>"></script>
<script src="<?= $baseThemeUrl . '/vendor/js/bootstrap.js' ?>"></script>
<script src="<?= $baseThemeUrl . '/vendor/libs/perfect-scrollbar/perfect-scrollbar.js' ?>"></script>
<script src="<?= $baseThemeUrl . '/vendor/libs/node-waves/node-waves.js' ?>"></script>
<script src="<?= $baseThemeUrl . '/vendor/libs/hammer/hammer.js' ?>"></script>
<script src="<?= $baseThemeUrl . '/vendor/libs/i18n/i18n.js' ?>"></script>
<script src="<?= $baseThemeUrl . '/vendor/libs/typeahead-js/typeahead.js' ?>"></script>
<script src="<?= $baseThemeUrl . '/vendor/js/menu.js' ?>"></script>

<!-- Main JS -->
<script src="<?= $baseThemeUrl . '/js/main.js' ?>"></script>

<!-- Custom  JS -->
<script>
    function pass() {
        "use strict";
        var passwordField = document.getElementById('password');
        var showPassIcon = document.getElementById('show_pass');

        var isTextField = passwordField.type === 'text';

        passwordField.type = isTextField ? 'password' : 'text';
        showPassIcon.innerHTML = isTextField ? '<i class="ti ti-eye"></i>' : '<i class="ti ti-eye-off"></i>';
    }
</script>
</body>
</html>

