{% extends "MapbenderCoreBundle::frontend.html.twig" %}
{% block mobilejs %}
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    {%- set scaleFactor = 1 -%}
    {{ parent() }}
{% endblock %}

{% block frontend_content %}
  <div id="templateWrapper" class="templateWrapper">
      {% block splash_screen %}
      <div id="splash-screen" class="splashScreenWrapper">
        <div class="splashScreen">
          <img class="app-screenshot" src="{{ asset(uploads_dir ~ '/' ~application.screenshot) }}" alt="{{ application.title }}" title="{{ application.description }}">
          <h1 class="app-title" title="{{ application.description }}">{{ application.title }}</h1>
        </div>
      </div>
      {% endblock %}

      <div id="content" class="contentPane">
          {{ map_markup(application) | raw }}
          {{ anchored_content_elements(application) | raw }}
          {{ unanchored_content_elements(application) | raw }}
      </div>

      <ul id="footer" class="toolBar itemsCenter bottom">
          {{ region_content(application, 'footer') | raw }}
      </ul>

      <div id="mobilePane" class="mobilePane" data-state="">
          <i id="mobilePaneClose" class="mobileClose fa far fa-times-circle fa-times-circle-o"></i>
          <h2 class="contentTitle"></h2>
          <div class="mobileContent">
              {{ region_content(application, 'mobilePane') | raw }}
          </div>
      </div>
  </div>
{% endblock %}
