{% extends "combo/page_template.html" %}
{% load combo gadjo assets i18n thumbnail %}

{% block meta_icons_opengraph %}{% endblock %}

{% block meta_icons %}
  {{ block.super }}
  {% get_asset "platforms:large-image" as platform_large_image %}
  {% if platform_large_image %}
    <meta property="og:title" content="{% firstof page_title site_title %}" />
    <meta property="og:image" content="{{ portal_url }}assets/platforms:large-image" />
    {% if platforms_meta_description %}
      <meta property="og:description" content="{{ platforms_meta_description|default:"" }}">
    {% endif %}

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="{% firstof page_title site_title %}" />
    {% if platforms_meta_description %}
      <meta name="twitter:description" content="{{ platforms_meta_description|default:"" }}">
    {% endif %}
    <meta name="twitter:image" content="{{ portal_url }}assets/platforms:large-image" />
  {% endif %}
{% endblock %}

{% block extra_top_head_js %}
  {{ block.super }}
  <script src="{{site_base}}{% xstatic 'jquery-ui' 'jquery-ui.min.js' %}"></script>
{% endblock %}

{% block header-title %}
<div id="logo"><a href="{% skeleton_extra_placeholder "top-logo-link" %}{% firstof toodego_url portal_url %}{% end_skeleton_extra_placeholder %}"> <span class="sr-only">Toodego, les services en ligne dans la métropole de Lyon</span></a></div>
{% endblock %}

{% block header-content %}
  {% skeleton_extra_placeholder mobile-user-button %}
  {% include "includes/glc-user-login-logout-button.html" with class_name="mobile-user-button" %}
{% end_skeleton_extra_placeholder %}
{% endblock %}

{% block banner %}
  {% skeleton_extra_placeholder banner %}
{% end_skeleton_extra_placeholder %}
{% endblock %}

{% block content-pre %}
  {% block columns-top %}
    {% placeholder "columns-top" name="Haut de page" optional=True acquired=False outer_tag=True %}
  {% endblock %}

  {% if page.extra_variables.banner_title %}
    {% firstof page.extra_variables.banner_territory_code default_banner_territory_code as banner_territory_code %}
    {% with territoires_infos|get:banner_territory_code as territoire_info %}
      <div class="page-banner-title"
        {% if territoire_info.couleur_fond %}style="--color-bg: {{ territoire_info.couleur_fond }}CC;{% endif %}">
          <div class="page-banner-title--text">
            {% if banner_territory_code and banner_territory_code != '-' %}
              <p><img src="{% firstof toodego_url '/' %}assets/gp:territoirelogo:{{ banner_territory_code }}" alt="{{ territoire_info.libelle }}"></p> {% endif %}
            <h1>{{ page.extra_variables.banner_title }}</h1>
          </div>
          {% if page.picture %}
            <div class="page-banner-title--image">
              {% thumbnail page.picture "680x680" crop="50% 25%" as im %}
                <img src="{{ im.url }}" alt=""/>
              {% endthumbnail %}
            </div>
          {% endif %}
        </div>
    {% endwith %}
  {% endif %}
{% endblock %}

{% block content %}
  {% block combo-content %}
    {% block page-content %}
      {% block sidebar %}{% endblock %}
      <div id="columns-wrapper">
        <div id="columns" class="clearfix">
          {% block columns %}
            {% trans "Content" as name %}
            {% placeholder "content" name=name %}
          {% endblock %}
        </div>
        {% block columns-bottom %}
          {% placeholder "columns-bottom" name=_('Bottom of content') optional=True acquired=False outer_tag=True %}
        {% endblock %}
      </div>
    {% endblock %}
  {% endblock %}
{% endblock %}