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

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

{% block stylesheets %}
    <link href="{{ publicPath }}/dist/css/chunk-vendors.css?v={{ assetsVersion }}" rel="stylesheet"/>
    <link href="{{ publicPath }}/dist/css/app.css?v={{ 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">
    <{{ componentName }}
    {% for prop in componentProps %}
        :{{ prop.getName() }}="{{ prop.getValue() }}"
    {% endfor %}
    >
    <template v-slot:footer>
        <div class="orangehrm-copyright-wrapper">
            {% include 'copyright.html.twig' %}
        </div>
    </template>
    </{{ componentName }}>
    </div>
{% endblock %}

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