{% extends 'base.html.twig' %}

{% block links %}
  <link rel="icon" href="{{ publicPath }}/dist/favicon.ico?{{ assetsVersion }}">
  <link href="{{ publicPath }}/dist/css/chunk-vendors.css?{{ assetsVersion }}" rel="preload" as="style">
  <link href="{{ publicPath }}/dist/css/app.css?{{ assetsVersion }}" rel="preload" as="style">
  <link href="{{ publicPath }}/dist/js/chunk-vendors.js?{{ assetsVersion }}" rel="preload" as="script">
  <link href="{{ publicPath }}/dist/js/app.js?{{ assetsVersion }}" rel="preload" as="script">
{% endblock %}

{% block stylesheets %}
  <link href="{{ publicPath }}/dist/css/chunk-vendors.css?{{ assetsVersion }}" rel="stylesheet"/>
  <link href="{{ publicPath }}/dist/css/app.css?{{ assetsVersion }}" rel="stylesheet"/>
{% endblock %}


{% block body %}
  <noscript>
    <strong>
      We're sorry but orangehrm doesn't work properly without JavaScript enabled. Please enable it to continue.
    </strong>
  </noscript>

  <div id="app">
    <oxd-layout
        home-url="https://www.orangehrm.com/"
        :sidepanel-menu-items="{{ sidePanelMenuItems | json_encode() }}"
        :topbar-menu-items="{{ topMenuItems | json_encode() }}"
        :user="{{ user | json_encode() }}"
        brand-logo-src="{{ clientLogoUrl }}"
        brand-banner-src="{{ clientBannerUrl }}"
        logout-url="{{ baseUrl }}/auth/logout"
        support-url="{{ baseUrl }}/help/support"
        :update-password-url="{{ user.hasPassword ? "\"#{baseUrl}/pim/updatePassword\"" : "null" }}"
        :permissions="{{ (permissions ? permissions : []) | json_encode() }}"
        :breadcrumb="{{ breadcrumb | json_encode() }}"
        :date-format="{{ dateFormat | json_encode() }}"
    >
      <{{ componentName }}
      {% for prop in componentProps %}
        :{{ prop.getName() }}="{{ prop.getValue() }}"
      {% endfor %}
      >
    </{{ componentName }}>
    <template v-slot:footer>{% include 'copyright.html.twig' %}<br></template>
    </oxd-layout>
  </div>
{% endblock %}

{% block javascripts %}
  <script type="text/javascript">
      window.appGlobal = {
          baseUrl: "{{ baseUrl }}",
      }
  </script>
  <script src="{{ publicPath }}/dist/js/chunk-vendors.js?{{ assetsVersion }}"></script>
  <script src="{{ publicPath }}/dist/js/app.js?{{ assetsVersion }}"></script>
{% endblock %}