<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Cairo:wght@400;500;600;700;800&display=swap" />
<link rel="stylesheet" type="text/css" href="{assetPath file='all.min.css'}?v={$versionHash}" />
<link rel="stylesheet" type="text/css" href="{$WEB_ROOT}/templates/orderforms/hostique/custom-style.css?v={$versionHash}-hostique-01" />
<link rel="stylesheet" type="text/css" href="{$WEB_ROOT}/templates/orderforms/hostique/custom.css?v={$versionHash}-hostique-91" />
<script type="text/javascript" src="{assetPath file='scripts.min.js'}?v={$versionHash}"></script>

<div class="hostique-order-topbar-shell">
    <div class="hostique-order-topbar">
        <div class="hostique-order-topbar__brand">
            <a class="hostique-order-topbar__brand-link hostique-brand" href="{$WEB_ROOT}/clientarea.php" aria-label="Nebulix">
                {include file="$template/includes/hostique-logo-lockup.tpl" hostiqueLogoClass="hostique-logo-lockup--order" hostiqueLogoAlt="Nebulix Cloud Hosting Platform"}
            </a>
        </div>

        <div class="hostique-order-topbar__search">
            <div class="hostique-order-topbar__search-field">
                <i class="fas fa-search" aria-hidden="true"></i>
                <input type="text" class="form-control" placeholder="{$LANG.search|default:'Search'}" aria-label="{$LANG.search|default:'Search'}" />
            </div>
        </div>

        <div class="hostique-order-topbar__actions">
            <button class="hostique-order-control" type="button" data-toggle="modal" data-target="#modalChooseLanguage" aria-label="{lang key='chooselanguage'}">
                <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><path d="M2 12h20"></path><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
            </button>
            {if $loggedin}
                <div class="dropdown hostique-order-user-menu">
                    <button class="hostique-order-control hostique-order-control--user" type="button" data-toggle="dropdown" aria-expanded="false" aria-label="{lang key='clientareatitle'}">
                        <span class="hostique-order-user-menu__avatar">
                            {if $clientsdetails.firstname}{$clientsdetails.firstname|substr:0:1|upper}{elseif $loggedinuser.firstname}{$loggedinuser.firstname|substr:0:1|upper}{else}U{/if}
                        </span>
                        <span class="hostique-order-user-menu__meta">
                            <strong>{if $clientsdetails.firstname}{$clientsdetails.firstname} {$clientsdetails.lastname}{elseif $loggedinuser.firstname}{$loggedinuser.firstname} {$loggedinuser.lastname}{else}{lang key='clientareatitle'}{/if}</strong>
                            <small>{lang key='clientareatitle'}</small>
                        </span>
                        <i class="fas fa-chevron-down header-control-btn__chevron" aria-hidden="true"></i>
                    </button>
                    <div class="dropdown-menu dropdown-menu-right hostique-order-user-menu__dropdown">
                        <a class="dropdown-item" href="{$WEB_ROOT}/clientarea.php">
                            <span class="hostique-order-user-menu__item-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"></rect><path d="M9 4v16"></path><path d="M13 9h4"></path><path d="M13 13h4"></path></svg>
                            </span>
                            <span>{lang key='clientareatitle'}</span>
                        </a>
                        <a class="dropdown-item" href="{$WEB_ROOT}/clientarea.php?action=services">
                            <span class="hostique-order-user-menu__item-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="14" rx="2"></rect><path d="M8 20h8"></path></svg>
                            </span>
                            <span>{lang key='navservices'}</span>
                        </a>
                        <a class="dropdown-item" href="{$WEB_ROOT}/clientarea.php?action=domains">
                            <span class="hostique-order-user-menu__item-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M3 12h18"></path><path d="M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18z"></path></svg>
                            </span>
                            <span>{lang key='navdomains'}</span>
                        </a>
                        <a class="dropdown-item" href="{$WEB_ROOT}/clientarea.php?action=invoices">
                            <span class="hostique-order-user-menu__item-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"></rect><path d="M3 10h18"></path></svg>
                            </span>
                            <span>{lang key='navinvoices'}</span>
                        </a>
                        <a class="dropdown-item d-lg-none" href="{$WEB_ROOT}/supporttickets.php">
                            <span class="hostique-order-user-menu__item-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24"><path d="M18 10a6 6 0 1 0-12 0v5a2 2 0 0 0 2 2h2v-5H8"></path><path d="M16 17h2a2 2 0 0 0 2-2v-5"></path><path d="M12 19v2"></path></svg>
                            </span>
                            <span>{lang key='navtickets'}</span>
                        </a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item hostique-order-user-menu__logout" href="{$WEB_ROOT}/logout.php">
                            <span class="hostique-order-user-menu__item-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24"><path d="M15 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3"></path><path d="M10 17l5-5-5-5"></path><path d="M15 12H4"></path></svg>
                            </span>
                            <span>{lang key='logout'}</span>
                        </a>
                    </div>
                </div>
            {else}
                <a class="hostique-order-control" href="{$WEB_ROOT}/index.php?rp=/login" aria-label="{lang key='login'}">
                    <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="3.25"></circle><path d="M5 20a7 7 0 0 1 14 0"></path></svg>
                </a>
            {/if}
            <a class="hostique-order-control hostique-order-control--cart" href="{$WEB_ROOT}/cart.php?a=view" aria-label="{lang key='carttitle'}">
                <svg viewBox="0 0 24 24"><circle cx="9" cy="20" r="1.5"></circle><circle cx="18" cy="20" r="1.5"></circle><path d="M3 4h2l2.1 10.2a1 1 0 0 0 1 .8h9.7a1 1 0 0 0 1-.8L21 7H7"></path></svg>
                {assign var="orderCartCount" value=$cartitems|default:$cartitemcount|default:0}
                {if $orderCartCount > 0}
                    <span class="hostique-order-control__badge">{$orderCartCount}</span>
                {/if}
            </a>
        </div>
    </div>
</div>

<script>
(function () {
    var theme = {
        hue: "238",
        sat: "88%",
        primaryLightness: "66%",
        primary: "#5b5cf6",
        primaryRgb: "91, 92, 246",
        accent: "#7d6bff",
        accentRgb: "125, 107, 255",
        gradient: "linear-gradient(135deg, #4e46f8 0%, #7d6bff 100%)",
        primaryHover: "#4c4eed",
        primaryActive: "#3f42dd",
        hoverGradient: "linear-gradient(135deg, #433cf0 0%, #6f5dff 100%)"
    };

    function applyOrderTheme() {
        var root = document.documentElement;

        if (window.HostiqueBranding && typeof window.HostiqueBranding.applyThemeBranding === "function") {
            window.HostiqueBranding.applyThemeBranding("blue");
        } else {
            root.style.setProperty("--hue", theme.hue);
            root.style.setProperty("--sat", theme.sat);
            root.style.setProperty("--primary-lightness", theme.primaryLightness);
            root.style.setProperty("--brand-primary", theme.primary);
            root.style.setProperty("--brand-primary-rgb", theme.primaryRgb);
            root.style.setProperty("--brand-primary-hover", theme.primaryHover || theme.primary);
            root.style.setProperty("--brand-primary-active", theme.primaryActive || theme.primaryHover || theme.primary);
            root.style.setProperty("--brand-accent", theme.accent);
            root.style.setProperty("--brand-accent-rgb", theme.accentRgb);
            root.style.setProperty("--primary", theme.primary);
            root.style.setProperty("--primary-rgb", theme.primaryRgb);
            root.style.setProperty("--accent", theme.accent);
            root.style.setProperty("--accent-rgb", theme.accentRgb);
            root.style.setProperty("--gradient-primary", theme.gradient);
            root.style.setProperty("--gradient-primary-hover", theme.hoverGradient);
            root.style.setProperty("--primary-hover", theme.primaryHover || theme.primary);
        }

        document.body.setAttribute("data-theme", "blue");
    }

    applyOrderTheme();
})();
</script>
