{{ setTranslationContext('hubleto-app-community-desktop-loader', 'Controllers\\Desktop') }}
{% set secondSidebar = viewParams.activatedApp.renderSecondSidebar() %}
{% set isPremium = hubleto.env().isPremium() %}

{% macro appBtn(app, inGroup, badgeNumber) %}
  <div class="flex gap-1">
    <a
      type="button"
      class="
        btn
        {% if app.isActivated %} btn-active {% else %}
        {% if notificationsCount > 0 %} text-yellow-100 {% endif %} {% endif %} flex-10 truncate
      "
      href="{{ config.projectUrl }}/{{ app.manifest.rootUrlSlug }}" data-pr-tooltip="{{ app.manifest.nameTranslated }}"
      title="{{ app.manifest.nameTranslated }}"
    >
      <span class="icon"><i class="{{ app.manifest.icon }}"></i></span>
      <span class="text">{{ app.manifest.nameTranslated }}</span>
      {% if badgeNumber > 0 %}
        <div class="badge badge-small badge-red ml-auto mr-1">{{ badgeNumber }}</div>
      {% endif %}
    </a>
  </div>
{% endmacro %}

{% set logoUrl = config.logoUrl ?? hubleto.env().assetsUrl ~ "/images/logo-hubleto.png" %}
{% set secondLogoUrl = config.secondLogoUrl %}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name='og:image' content='{{ hubleto.env().assetsUrl }}/images/logo-hubleto.png'>
  <meta name='og:title' content='Hubleto | Business Application Hub'>
  <link rel='shortcut icon' href='{{ logoUrl }}'>
  <title>{{ config.appTitle ?? user.DEFAULT_COMPANY.name ~ " | Hubleto | Business Application Hub" }}</title>

  <script>
    window.ConfigEnv = {
      'rewriteBase': '{{ hubleto.env().rewriteBase }}',
      'url': '{{ hubleto.env().projectUrl }}',
      'projectUrl': '{{ hubleto.env().projectUrl }}',
      'uploadUrl': '{{ hubleto.env().uploadUrl }}',
      'idUser': {{ user.id ?? 0 }},
      'userEmail': '{{ user.email ?? '' }}',
      'isPremium': {% if isPremium %} true {% else %} false {% endif %},
      'language': '{{ user.language ?: "en" }}',
      'locale': {
        'currencySymbol': '{{ hubleto.locale().getCurrencySymbol() }}',
        'decimalsSeparator': '{{ hubleto.locale().getDecimalsSeparator() }}',
        'thousandsSeparator': '{{ hubleto.locale().getThousandsSeparator() }}',
      }
    }
  </script>

  <script src='{{ hubleto.env().assetsUrl }}/jquery-3.5.1.js'></script>
  <script defer src='{{ hubleto.env().assetsCompiledUrl }}/js/react-ui-vendor.js'></script>
  <script defer src='{{ hubleto.env().assetsCompiledUrl }}/js/react-ui-core.js'></script>
  <script defer src='{{ hubleto.env().assetsCompiledUrl }}/js/react-ui-ext.js'></script>
  <script defer src='{{ hubleto.env().assetsCompiledUrl }}/js/main.js'></script>
  <script defer src='{{ hubleto.env().assetsCompiledUrl }}/js/apps.js'></script>
  <link rel="stylesheet" type="text/css" href="{{ hubleto.env().assetsCompiledUrl }}/css/main.css">
  <link rel="stylesheet" type="text/css" href="{{ hubleto.env().assetsUrl }}/css/fontawesome-6.6.css">
  <link rel="stylesheet" type="text/css" href="{{ hubleto.env().assetsUrl }}/css/font-gabarito.css">
  <link rel="stylesheet" type="text/css" href="{{ hubleto.env().assetsUrl }}/css/themes/{{ viewParams.currentTheme }}.css">
  {% if user.DEFAULT_COMPANY.brand_color_primary != '' %}
    <style> :root { --color-primary: {{ user.DEFAULT_COMPANY.brand_color_primary }} !important; } </style>
  {% endif %}
</head>

<body id="page-top">
  <div id="ajax-loader"></div>
  {% if (viewParams.showOnlyContentHtml) %} {{ contentHtml|raw }} {% else %}

    <div id="app-launcher" onclick="lchr(false);">
      <div>
      <div class="app-launcher-header">
        <input placeholder="{{ translate("Search app...") }}" onkeyup="smis(event, this.value, $('#app-launcher .app-launcher-app-button'));" onclick="event.stopPropagation();" />
      </div>
      {% for app in hubleto.appManager().getEnabledApps() %}
        <a
          class='btn app-launcher-app-button'
          href="{{ config.projectUrl }}/{{ app.manifest.rootUrlSlug }}" data-pr-tooltip="{{ app.manifest.nameTranslated }}"
        >
          <span class="icon"><i class="{{ app.manifest.icon }}"></i></span>
          <span class="text">{{ app.manifest.nameTranslated }}</span>
        </a>
      {% endfor %}
    </div></div>

    <nav id="default-navbar"><div>
      <div class="flex items-center">
        <div class="flex flex-row justify-around md:gap-2">
          <a class="flex" href="{{ config.projectUrl }}/" class="w-8 h-8">
            <img id="logo" src="{{ logoUrl }}" class="h-8 m-auto">
          </a>
          {% if secondLogoUrl %} <img src="{{ secondLogoUrl }}" class="h-8 m-auto"> {% endif %}
          <button onclick="toggleSidebar()" class="block sm:hidden md:ml-4 md:border md:border-primary/20 text-primary py-1.5 px-2 md:rounded">
            <span class="icon"><i id="menuButton" class="fas fa-chevron-down"></i></span>
          </button>
        </div>
      </div>
      <div class="flex-1 ml-2 max-w-72 hidden md:block">
        <hblreact-search string:endpoint='api/search'></hblreact-search>
      </div>
      <div class="ml-2 hidden md:block">
        <a class="btn btn-transparent text-primary" href="{{ config.projectUrl }}/ai-assistant" data-pr-tooltip="AIAssistant">
          <span class="icon"><i class="fas fa-robot text-xl"></i></span>
        </a>
      </div>
      {% if viewParams.activatedSidebarGroup %}
        <div class="ml-2 hidden md:block">
          <a
            class="btn btn-transparent"
            style="border-left: 4px solid {{ viewParams.activatedSidebarGroup.color }}"
            href="{{ config.projectUrl }}/~/{{ viewParams.activatedSidebarGroupUrlSlug }}"
          >
            <span class="icon"><i class="{{ viewParams.activatedSidebarGroup.icon }}"></i></span>
            <span class="text">{{ viewParams.activatedSidebarGroup.title }}</span>
          </a>
        </div>
        <div class="ml-2 hidden md:block">
          <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
          </svg>
        </div>
      {% endif %}
      <div class="block flex-1">
        {% if viewParams.activatedApp.manifest.namespace != "Hubleto\\App\\Community\\Desktop" %}
          {{ include('@hubleto-main/Breadcrumbs.twig', {'items': viewParams.breadcrumbs}) }}
        {% endif %}
      </div>
      <div class="hidden sm:block ml-2">
        <button class="btn btn-transparent" onclick="lchr(true);">
          <span class="icon"><i class="fas fa-table-cells-large"></i></span>
          <span class="text">{{ translate('Apps') }}</span>
        </button>
      </div>
      <div class="flex-1 ml-2">
        <ul class="flex font-sm gap-1 justify-end">
          {% if viewParams.availableLanguages|length > 0 %}
            <li class="mr-2 hidden md:block">
              <button class="btn btn-transparent btn-dropdown">
                <div class="menu">
                  <div class="list mr-2">
                    {% for langSymbol, lang in viewParams.availableLanguages %}
                      <a
                        href="?set-language={{ langSymbol }}"
                        class="btn btn-white btn-no-border btn-list-item"
                      >
                        <span class="icon"><img src="{{ hubleto.env().assetsUrl }}/images/flags/{{ lang.flagImage }}" style="max-height:1em;max-width:1em;" /></span>
                        <span class="text">{{ lang.name }}</span>
                      </a>
                    {% endfor %}
                  </div>
                </div>
                <span class="text">
                  {{ (user.language ?: 'en')|upper }}
                </span>
                <span class="icon">
                  <img src="{{ hubleto.env().assetsUrl }}/images/flags/{{ (user.language ?: 'en')|lower }}.jpg" style="max-height:1em;max-width:1em;" />
                </span>
              </button>
            </li>
          {% endif %}
          {% if viewParams.contextHelpUrl %}
            <li class="mr-2 hidden lg:block">
              <a
                class="btn btn-transparent"
                href="https://help.hubleto.eu/v0/{{ viewParams.contextHelpUrl }}"
                target="_blank"
              >
                <span class="icon text-blue-500"><i class="fas fa-life-ring"></i></span>
                <span class="text">{{ translate('Help') }}</span>
              </a>
            </li>
          {% endif %}
          {% if hubleto.appManager().isAppInstalled('Hubleto\\App\\Community\\Notifications') %}
            <li class="mr-2 hidden md:block">
              {% if viewParams.unreadNotifications > 0 %}
                <div style="position:relative;width:0;height:0;top:-0.5em;left:1.5em">
                  <div class="badge badge-yellow px-1">{{ viewParams.unreadNotifications }}</div>
                </div>
              {% endif %}
              <a
                class="btn btn-transparent {% if viewParams.unreadNotifications > 0 %} btn-warning {% endif %}"
                href="{{ config.projectUrl }}/notifications"
              >
                <span class="icon"><i class="fas fa-bell"></i></span>
              </a>
            </li>
          {% endif %}
          {% if hubleto.appManager().isAppInstalled('Hubleto\\App\\Community\\Cloud') %}
            <li class="mr-2 hidden lg:block">
              {% if isPremium %}
                <a class="btn btn-transparent" href="{{ config.projectUrl }}/cloud">
                  <span class="icon text-primary"><i class="fas fa-medal"></i></span>
                  <span class="text">{{ translate('Premium') }}</span>
                </a>
              {% else %}
                <a class="btn btn-transparent" href="{{ config.projectUrl }}/cloud">
                  <span class="icon text-primary"><i class="fas fa-cloud"></i></span>
                  <span class="text">{{ translate('Personal') }}</span>
                </a>
              {% endif %}
            </li>
          {% endif %}
          <li class="mr-2 block">
            <button id="theme-toggle-btn" class="btn btn-transparent" onclick="toggleTheme();">
              <span class="icon"><i class="fas fa-sun"></i></span>
            </button>
          </li>
          <li>
            <button class="btn btn-white btn-dropdown mr-2">
              <span class="text hidden lg:block">
                {% if user.first_name == '' and user.last_name == '' %}
                  {{ user.email }}
                {% else %}
                  {{ user.first_name }} {{ user.last_name }}
                {% endif %}
              </span>
              <span class="icon"><i class='fas fa-user-tie'></i></span>
              <div class="menu relative">
                <div class="list bg-primary" style="right:-100%;top:1em">
                  <div class="text-center text-white text-lg p-2">
                    {{ user.first_name }} {{ user.last_name }}<br/>
                    {{ user.email }}<br/>
                    {{ user.DEFAULT_COMPANY.name }}
                  </div>
                  <a class="btn btn-white btn-list-item p-2" href="{{ config.projectUrl }}/settings/my-account">
                    <span class="icon"><i class='fas fa-user-tie'></i></span>
                    <span class="text">{{ translate('Manage your user account') }}</span>
                  </a>
                  {% if hubleto.appManager().isAppInstalled('Hubleto\\App\\Community\\Cloud') %}
                    <a class="btn btn-white btn-list-item p-2" href="{{ config.projectUrl }}/cloud">
                      <span class="icon"><i class='fas fa-cloud'></i></span>
                      <span class="text">{{ translate('Manage cloud account') }}</span>
                    </a>
                  {% endif %}
                  <a class="btn btn-white btn-list-item p-2" href="{{ config.projectUrl }}/?sign-out">
                    <span class="icon"><i class='fas fa-sign-out-alt'></i></span>
                    <span class="text">{{ translate('Sign out') }}</span>
                  </a>
                </div>
              </div>
            </button>
          </li>
        </ul>
      </div>
    </div></nav>

    <aside id="default-sidebar">
      <nav>
        <a class="btn btn-primary-outline {{ hubleto.router().getRoute() == '' ? "btn-active" : "" }}" href="{{ config.projectUrl }}/">
          <span class="icon"><i class="fas fa-home"></i></span>
          <span class="text">{{ user.DEFAULT_COMPANY.name }}</span>
        </a>
        <div class="nav-inner">
          {% for app in hubleto.appManager().getEnabledApps() %}
            {% if hubleto.appManager().apps.canAppDangerouslyInjectDesktopHtmlContent(app.namespace) %}
              {{ app.dangerouslyInjectDesktopHtmlContent('beforeSidebar')|raw }}
            {% endif %}
          {% endfor %}

          {% for sidebarGroup, sidebarGroupData in viewParams.sidebarGroups %}
            {% set appBtns = [] %}
            {% set hasActivatedApp = false %}
            {% for app in viewParams.appsInSidebar %}
              {% if sidebarGroup in app.manifest.sidebarGroup|split(',') %}
                {% set appBtns = appBtns|merge([_self.appBtn(app, true, viewParams.sidebarBadgeNumbers[app.manifest.namespace])]) %}
                {% if app.isActivated %}
                  {% set hasActivatedApp = true %}
                {% endif %}
              {% endif %}
            {% endfor %}

            {% if hubleto.router().getRoute() == 'desktop/' ~ sidebarGroup %}
              {% set hasActivatedApp = true %}
            {% endif %}

            {% if appBtns|length == 0 %}
            {% else %}
              <div
                class="sidebar-group {% if hasActivatedApp %} activated {% endif %}"
                style="
                  border-left:5px solid {{ sidebarGroupData.color }};
                  border-top:1px solid {{ sidebarGroupData.color }}20;
                  margin-top:1px;
                "
              >
                <a
                  class="sidebar-group-title"
                  onclick="
                    $('.sidebar-group').removeClass('activated');
                    $(this).closest('.sidebar-group').addClass('activated');
                  "
                  href="{{ config.projectUrl }}/~/{{ sidebarGroup }}" data-pr-tooltip="{{ sidebarGroupData.title }}"
                >
                  {{ sidebarGroupData.title }}
                </a>
                <div id="sg_{{ sidebarGroup }}_btns" class="sidebar-group-btns">
                  <div class="inner">{{ appBtns|join('')|raw }}</div>
                </div>
              </div>
            {% endif %}
          {% endfor %}
          {% set i = 0 %}
          {% for app in viewParams.appsInSidebar %}
            {% if app.manifest.sidebarGroup is empty %} {{ _self.appBtn(app, false) }} {% endif %}
            {% set i = i + 1 %}
          {% endfor %}
        </div>
        <div class='nav-release-info text-center'>
          {% if user.DEFAULT_COMPANY.logo != '' %}
            <div class="m-4">
              <img
                src="{{ config.uploadUrl }}/{{ user.DEFAULT_COMPANY.logo }}"
                class="max-h-4 m-auto"
              />
            </div>
          {% endif %}
          hbl v[{{ viewParams.release }}]<br/>
          <a href="https://www.hubleto.eu/en/privacy-policy" target="_blank">{{ translate('Privacy policy') }}</a>
          <a href="https://www.hubleto.eu/en/terms-of-use" target="_blank">{{ translate('Terms of use') }}</a>
        </div>
      </nav>
      {% if secondSidebar != '' %}
        <div class="second-sidebar">
          {{ secondSidebar|raw }}
        </div>
      {% endif %}
    </aside>

    <div
      id="app-main-content"
      class="{% if secondSidebar != '' %} sidebar-two-levels {% endif %}"
    >
      {{ contentHtml|raw }}
    </div>

    <div id="app-dialogs"></div>

  {% endif %}

  {% for app in hubleto.appManager().getEnabledApps() %}
    {% if hubleto.appManager().canAppDangerouslyInjectDesktopHtmlContent(app.namespace) %}
      {{ app.dangerouslyInjectDesktopHtmlContent('footer')|raw }}
    {% endif %}
  {% endfor %}

  <script>

    function lchr(show) {
      if (show) {
        $('#app-launcher').addClass('visible');
        $('#app-launcher > div .app-launcher-header input').focus();
      } else {
        $('#app-launcher').removeClass('visible');
      }
    }
    function smis(e, q, b) {
      if (q == '') b.slideDown(100); else {
        let r = new RegExp(q, "i");
        b.each(function() { if ($(this).find('.text').text().match(r)) $(this).slideDown(100); else $(this).slideUp(100); });
      }
      if (e.keyCode == 27) { lchr(false); return; }
      if (e.keyCode == 13) { b.filter(':visible').get(0).click(); return; }
    }

    function toggleSidebar() {
      $("#default-sidebar").toggleClass('visible');
    }

    function applyTheme() {
      if (localStorage.theme == "dark") {
        $('*').addClass('dark');
        $('#theme-toggle-btn').find('.icon i').removeClass('fa-sun').addClass('fa-moon');
      } else {
        $('*').removeClass('dark');
        $('#theme-toggle-btn').find('.icon i').removeClass('fa-moon').addClass('fa-sun');
      }
    }

    function toggleTheme() {
      localStorage.theme = (localStorage.theme == "dark" ? "light" : "dark");
      applyTheme();
    }

    applyTheme();

  </script>

  <script> globalThis.dictionary = JSON.parse(atob('{{ viewParams.dictionaryString }}')); </script>

</body>

</html>
