<!DOCTYPE html>
<html>
  <head>
    <link
      id="favicon"
      rel="icon"
      type="image/x-icon"
      href="{{{__favicon__}}}"
    />
    <link
      type="text/css"
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/supervisely/js-bundle@{{{js_bundle_version}}}/sly-app-widgets-{{{js_bundle_version}}}.bundle.css"
    />
    <style>
      #app-global-loading-icon {
        background: white;
        border-radius: 50%;
        width: 75px;
        height: 75px;
        padding: 10px;
        margin: 10px 0;
        position: relative;
      }
      
       @keyframes app-loading-rotation {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      #app-global-loading-icon::after {
        content: '';
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 0;
        transform: translate(-50%, -50%);
        width: 95px;
        height: 95px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-bottom-color: #fb4481;
        animation: app-loading-rotation 1s linear infinite;
      }

      #app-global-loading-icon > img {
        width: 75px;
        border-radius: 50%;
      }
    </style>
    <title>{{{app_name}}}</title>
  </head>

  <body style="background-color: #f4f7fe">
    <center>
      <div id="app-global-loading-icon">
        <img src="https://app.supervise.ly/loading.gif">
      </div>
    </center>
    <script src="https://cdn.jsdelivr.net/gh/supervisely/js-bundle@{{{js_bundle_version}}}/sly-app-widgets-{{{js_bundle_version}}}.bundle.js"></script>
    <script
      type="module"
      src="https://cdn.jsdelivr.net/gh/supervisely-ecosystem/supervisely-app-frontend-js@v{{{js_frontend_version}}}/SlyApp.js"
    ></script>
    <script>
      window.parent.postMessage('{ "showHeader": false }', "*");
    </script>

    {% for scripts in __widget_scripts__.values() %}
        {% if scripts is string %}
            <script src="{{{ scripts }}}"></script>
        {% else %}
            {% for scripts in scripts %}
                <script src="{{{ scripts }}}"></script>
            {% endfor %}
        {% endif %}
    {% endfor %}

    <div id="sly-app">
      <sly-app>
        <template v-slot="{ post, state, data, session }">
          <sly-app-header
            v-if="session"
            :session="session"
            :data="data"
            :state="state"
            :style="{ padding: `${state.app_body_padding} ${state.app_body_padding} 0` }"
          ></sly-app-header>
          <div :style="{'padding': state.app_body_padding}">
            {% if __no_html_mode__ %} {% include 'no_html_main.html' %} {% else
            %} {% include 'main.html' %} {% endif %} {% include
            'dialog_window.html' %}
          </div>
        </template>
      </sly-app>
    </div>
    <!-- Hot reload script -->
    {% if DEBUG %} {{{ hot_reload.script(url_for('hot-reload')) | safe }}} {%
    endif %}
  </body>
</html>
