<?php
/**
 * @var string $locale
 * @var Johncms\System\Users\User $user
 * @var Johncms\Counters $counters
 * @var Johncms\Ads $ads
 */

$counters = $container->get('counters');
$notifications = $counters->notifications();
$analytics = $counters->counters();
?>
<!DOCTYPE html>
<html lang="<?= $locale ?>" dir="<?= $locale === 'ar' ? 'rtl' : 'ltr' ?>">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0">
    <meta name="HandheldFriendly" content="true">
    <meta name="MobileOptimized" content="width">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="Generator" content="JohnCMS, https://johncms.com">
    <?= $this->section('meta', '') ?>
    <?php
    if (! empty($keywords)): ?>
        <meta name="keywords" content="<?= $this->e($keywords) ?>">
    <?php
    endif ?>
    <?php
    if (! empty($description)): ?>
        <meta name="description" content="<?= $this->e($description) ?>">
    <?php
    endif ?>
    <?php
    if (! empty($canonical)): ?>
        <link rel="canonical" href="<?= $canonical ?>">
    <?php
    endif ?>
    <meta name="theme-color" content="#586776">
    <?php if($locale === 'ar'): ?>
        <link rel="stylesheet" href="<?= $this->asset('css/app.rtl.css', true) ?>">
    <?php else: ?>
        <link rel="stylesheet" href="<?= $this->asset('css/app.css', true) ?>">
    <?php endif; ?>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700,700i&display=swap">
    <link rel="shortcut icon" href="<?= $this->asset('images/favicon.ico') ?>">
    <?= $this->section('styles', '') ?>
    <link rel="alternate" type="application/rss+xml" title="RSS News" href="<?= $config['homeurl'] ?>/rss/">
    <title><?= (isset($title) ? $this->e($title) : $config['copyright']) ?></title>
</head>
<body>
<div class="wrapper min-vh-100 d-flex flex-column justify-content-between" id="app">
    <div class="page_layout justify-content-end d-flex w-100">
        <div class="sidebar">
            <div class="sidebar__logo">
                <a href="/admin/">
                    <span class="logo__image"><img src="<?= $this->asset('images/logo.svg') ?>" alt="logo" style="width: 70%;" class="img-fluid"></span>
                </a>
            </div>
            <div class="sidebar__wrapper d-flex flex-column">
                <?= $this->section('sidebar-user', $this->fetch('system::app/sidebar-user-menu', ['notifications' => $notifications])) ?>
                <?= $this->section('sidebar-menu', $this->fetch('system::app/sidebar-admin-menu')) ?>
            </div>
        </div>
        <div class="content-container content-container-padding d-flex flex-column">
            <nav class="navbar navbar-expand-lg top_nav fixed-top border-bottom shadow">
                <div class="container-fluid">
                    <div class="navbar-wrapper d-flex w-100 justify-content-between">
                        <div class="navbar-toggle">
                            <button type="button" class="navbar-toggler">
                                <span class="navbar-toggler-bar bar1"></span>
                                <span class="navbar-toggler-bar bar2"></span>
                                <span class="navbar-toggler-bar bar3"></span>
                            </button>
                        </div>
                        <div class="logo">
                            <a href="/">
                                <img src="<?= $this->asset('images/logo_mobile.svg') ?>" alt="logo" class="img-fluid" style="height: 30px; margin-bottom: -18px;">
                            </a>
                        </div>
                        <div>
                            <?php
                            if ($user->isValid()): ?>
                                <a href="/notifications/" class="icon_with_badge mr-2">
                                    <svg class="icon icon_messages">
                                        <use xlink:href="<?= $this->asset('icons/sprite.svg') ?>#messages"/>
                                    </svg>
                                    <?php
                                    if (! empty($notifications['all'])): ?>
                                        <span class="badge badge-danger badge-pill"><?= $notifications['all'] ?></span>
                                    <?php
                                    endif ?>
                                </a>
                            <?php
                            else: ?>
                                <a href="/login/" class="icon_with_badge">
                                    <svg class="icon ml-n2">
                                        <use xlink:href="<?= $this->asset('icons/sprite.svg') ?>#log-in"/>
                                    </svg>
                                </a>
                            <?php
                            endif ?>
                        </div>
                    </div>
                </div>
            </nav>
            <div class="container-fluid flex-grow-1">
                <?php
                if (! empty($page_title)): ?>
                    <h1 class="mb-0"><?= $this->e($page_title) ?></h1>
                <?php
                endif ?>
                <?= $this->fetch('system::app/breadcrumbs') ?>
                <?= $this->section('content') ?>
                <div class="to-top to-top_hidden">
                    <button class="btn btn__top">
                        <svg class="icon-40">
                            <use xlink:href="<?= $this->asset('icons/sprite.svg') ?>#top"/>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="page_layout container">
        <?= $this->section('footer_content') ?>
    </div>
    <div class="overlay"></div>
    <div class="page_layout justify-content-end d-flex w-100">
        <div></div>
        <div class="content-container">
            <div class="content-container-padding footer-padding">
                <div class="d-flex justify-content-between align-items-center border-top p-4 page-footer">
                    <div class="pl-1">
                        <a href="https://twitter.com/johncms" title="Twitter" target="_blank" rel="nofollow" class="mr-3 text-muted text-decoration-none">
                            <svg class="icon">
                                <use xlink:href="<?= $this->asset('icons/sprite.svg') ?>#twitter"/>
                            </svg>
                        </a>
                        <a href="https://t.me/johncms_official" title="Telegram" target="_blank" rel="nofollow" class="mr-3 text-muted text-decoration-none">
                            <svg class="icon">
                                <use xlink:href="<?= $this->asset('icons/sprite.svg') ?>#telegram"/>
                            </svg>
                        </a>
                        <a href="https://www.youtube.com/channel/UCIzwmZMHJgnBPEicpU9Itsw" title="YouTube" target="_blank" rel="nofollow" class="mr-2 text-muted text-decoration-none">
                            <svg class="icon">
                                <use xlink:href="<?= $this->asset('icons/sprite.svg') ?>#youtube2"/>
                            </svg>
                        </a>
                    </div>
                    <div class="flex-shrink-1 d-flex position-relative">
                        <?php
                        if (! empty($analytics)): ?>
                            <!-- Counters -->
                            <div class="mr-2 d-flex">
                                <?php
                                foreach ($analytics as $counter): ?>
                                    <div><?= $counter ?></div>
                                <?php
                                endforeach; ?>
                            </div>
                        <?php
                        endif; ?>
                        <div>
                            &copy; <?= date('Y') ?>, <a href="https://johncms.com" target="_blank" rel="nofollow" class="text-info">JohnCMS</a>
                        </div>
                        <?= $this->fetch('system::app/debug') ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade ajax_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content"></div>
    </div>
</div>
<script src="<?= $this->asset('js/manifest.js', true) ?>"></script>
<script src="<?= $this->asset('js/vendor.js', true) ?>"></script>
<script src="<?= $this->asset('js/app.js', true) ?>"></script>
<?php
if ($locale !== 'en'): ?>
    <?php
    try { // TODO: improve the asset method for simplify this construction
        ?>
        <script src="<?= $this->asset('js/flatpickr/' . $locale . '.js') ?>"></script>
        <script>flatpickr.localize(flatpickr.l10ns.<?= $locale ?>);</script>
        <?php
    } catch (Exception $exception) {
    }
    ?>
<?php
endif; ?>
<?= $this->section('scripts', '') ?>
</body>
</html>
