{% extends "engage/base_engage.html" %}

{% set section_title="Engage Page" %}
{% set section_path="/engage" %}

{% block title %}{{ metadata['topic_name'] }}{% endblock %}
{% block meta_description %}{{ metadata['subtitle'] }}{% endblock %}
{% block meta_image %}{{ metadata['meta_image'] }}{% endblock %}

{% block head_extra %}
  {% if 'active' in metadata and metadata['active'] == "false" %}
    <meta name="robots" content="nofollow" />
  {% endif %}

  {# This is a hack to indicate to crawls to not index this page #}
  {% if metadata['path'] == "/engage/ShellOnboarding" %}
    <meta name="robots" content="noindex, nofollow" />
  {% endif %}

  <meta name="discourse-url" value="{{ metadata['topic_path'] }}" />

{% endblock %}

{% block meta_copydoc %}{{ metadata["meta_copydoc"] }}{% endblock meta_copydoc %}

{% block content %}

<span id="publish_date" class="u-hide">{{ metadata["publish_date"] }}</span>
<span id="created_date" class="u-hide">{{ metadata["created_at"] }}</span>
<section class="p-strip p-engage-banner--{{ metadata['banner_class'] }}">
  <div class="u-fixed-width navigation-logo-engage">
    <a href="/">
      {% if metadata['banner_class'] == 'light' %}
        {{ image(url="https://assets.ubuntu.com/v1/43ef5c89-Canonical%20Ubuntu.svg",
                  alt="Ubuntu",
                  width="300",
                  height="55",
                  hi_def=True,
                  loading="auto") | safe
        }}
      {% else %}
        {{ image(url="https://assets.ubuntu.com/v1/b4f695ea-Canonical%20Ubuntu%20copy%202.svg",
                  alt="Ubuntu",
                  width="300",
                  height="55",
                  hi_def=True,
                  loading="auto") | safe
        }}
      {% endif %}
    </a>
  </div>
  <div class="row">
    <div class="col-7">
      <h1>{{ metadata["topic_name"] }}</h1>
      <p class="u-no-padding--top p-heading--4">
        {{ metadata['subtitle'] }}
      </p>
      {% if ("primary_cta" in metadata) and (metadata["primary_cta"] != "") %}
      <p class="{% if ('show_cta_on_banner' in metadata) and (metadata["show_cta_on_banner"] == "true" ) %}u-show{% else %}u-hide{% endif %}">
          <a href="{{ metadata['primary_link'] }}" class="p-button--positive">
            {{ metadata["primary_cta"] }}
          </a>
        {% if ("secondary_cta" in metadata) and (metadata["primary_cta"] != "") %}
          <a href="{{ metadata['secondary_link'] }}" class="p-button">
            {{ metadata['secondary_cta'] }}
          </a>
        {% endif %}
      </p>
      {% endif %}
    </div>
    {% if metadata["image"] != '' %}
    <div class="col-5 u-hide--small u-hide--medium u-vertically-center u-align--center">
      <img src="{{ metadata['image'] }}" alt="" width="{{ metadata['image_width'] }}"/>
    </div>
    {% endif %}
  </div>
</section>

{% if metadata["webinar_date"] is defined %}
  {% if metadata["webinar_date"] | date_has_passed %}
    {% include "engage/shared/_webinar-embed.html" %}
  {% endif %}
{% endif %}

<section class="p-strip is-shallow is-bordered u-text-max-width">
  <div class="row">
    <div class="{% if 'form_id' in metadata and metadata['form_id'] != '' %}col-7{% else %}col-12{% endif %}">
      {{ metadata["body_html"] | safe }}
    </div>
    {% if "form_id" in metadata and metadata["form_id"] != "" %}
    <div class="col-5" id="the-form">
      {% if metadata["language"] != '' %}
        {% set form = "engage/shared/_" + metadata["language"] + "_engage_form.html" %}
        {% if "form_cta" in metadata and metadata["form_cta"] != '' %}
          {% with id=metadata["form_id"], returnURL=metadata['path']+"/thank-you", cta=metadata['form_cta'] %}
            {% include form %}
          {% endwith %}
        {% else %}
          {% with id=metadata["form_id"], returnURL=metadata['path']+"/thank-you" %}
            {% include form %}
          {% endwith %}
        {% endif %}

      {% else %}
      {% if "form_cta" in metadata and metadata["form_cta"] != '' %}
        {% with id=metadata["form_id"], returnURL=metadata['path']+"/thank-you", cta=metadata['form_cta'] %}
          {% include "engage/shared/_en_engage_form.html" %}
        {% endwith %}
      {% else %}
        {% with id=metadata["form_id"], returnURL=metadata['path']+"/thank-you" %}
          {% include "engage/shared/_en_engage_form.html" %}
        {% endwith %}
      {% endif %}
      {% endif %}

    </div>
    {% endif %}
  </div>

</section>

{% if metadata["webinar_date"] is defined %}
  {% if not metadata["webinar_date"] | date_has_passed %}
    {% include "engage/shared/_webinar-embed.html" %}
  {% endif %}
{% else %}
  {% include "engage/shared/_webinar-embed.html" %}
{% endif %}

{% if "youtube_id" in metadata %}
<!-- Youtube webinars -->
<section class="p-strip is-shallow" id="youtube-section">
  <div class="row" id="webinar">
    <iframe title="Webinar" width="560" height="315" src="https://www.youtube.com/embed/{{ metadata['youtube_id'] }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</section>
{% endif %}

{% if "vimeo_id" in metadata %}
<!-- Vimeo webinars -->
<section class="p-strip is-shallow" id="vimeo-section">
  <div class="row" id="webinar">
    <iframe title="Webinar" src="https://player.vimeo.com/video/{{ metadata['vimeo_id'] }}" width="560" height="315" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
  </div>
</section>
{% endif %}

{% if related_pages_metadata %}
  <section class="p-strip--light is-shallow">
    <div class="row">
      <div class="col-8">
        <h2 class="p-heading--3">Additional Resources</h2>
      </div>
    </div>

    <div class="row p-divider">
      {% for page in related_pages_metadata %}
      <div class="col-4 p-divider__block">
        <h3 class="p-heading--4">
          <a href="{{ page["path"] }}">
            {{ page["topic_name"] }}
          </a>
        </h3>
        <p>{{ page["subtitle"] }}</p>
      </div>
      {% endfor %}
    </div>
  </section>
{% endif %}

{% endblock content %}