{% extends "base_index.html" %}

{% block head_extra %}
{% endblock %}

{#
  # Creating takeovers

  A takeover can belong to all or one language parent group. You can build a queue
  of them to rotate based on the user's language settings.

  To designate a takeover to display for a specific language parent group, specify
  the "lang" attribute on the <section> container. For takeovers that should appear
  for all languages, simply omit the "lang" attribute. For takeovers you don't want to
  be displayed in specific languages, you can use the "lang-skip" attribute
  (eg. lang-skip="fr" or lang-skip="fr de").

  NB: Only specify parent language groups (e.g. "en", "de"), *not* derivatives (e.g. "en-GB").

  ## Examples

    <section class="p-section--hero js-takeover"></section> <!-- For all languages -->
    <section lang="de" class="p-section--hero js-takeover"></section> <!-- For german languages only -->
    <section lang="fr" class="p-section--hero js-takeover"></section> <!-- For french languages only -->
    <section lang="es" class="p-section--hero js-takeover"></section> <!-- For spanish languages only -->
    <section lang="nl" class="p-section--hero js-takeover"></section> <!-- For dutch languages only -->
#}

{% block takeover_content %}
{% for takeover in takeovers %}
    {% with
      title=takeover['title'],
      subtitle=takeover['subtitle'],
      class="p-section--hero",
      header_image=takeover['image'],
      image_width=takeover["image_width"],
      image_height=takeover["image_height"],
      image_hide_small="true",
      primary_url=takeover['primary_url'],
      primary_cta=takeover['primary_cta'],
      primary_cta_class="",
      secondary_cta=takeover['secondary_cta'],
      secondary_url=takeover['secondary_url'],
      lang=takeover['lang'],
      lang_skip=takeover['lang_skip']
    %}
    {% include "takeovers/_template.html" %}
    {% endwith %}
  {% endfor %}
{% endblock takeover_content %}

{#
  # Creating notices

  A notice is a single line of text, with a link and an optional icon and a language.
  Only one notice per language will be visible to users.
  They are useful when you want to notify a specific segment of our global audience
  that something is available in their language.

  ## Example

    Let Japanese speaking users know that a localized website is available.
    include "shared/_notice_default.html" with lang="ja" text="私たちの日本のウェブサイトを試してみてください" url="https://jp.ubuntu.com" icon="https://assets.ubuntu.com/v1/838316ab-cof-25x25.png"

    The French Ubuntu community is having a release party!
    include "shared/_notice_default.html" with lang="fr" text="À Paris les 18 et 19 mai? Venez à l'Ubuntu Party!" url="https://ubuntu-paris.org/"
#}

{% block notices_content %}
  {% with lang="ja", text="私たちの日本のウェブサイトを試してみてください", url="https://jp.ubuntu.com", icon="https://assets.ubuntu.com/v1/8114528b-picto-ubuntu-orange.png" %}
    {% include "shared/_notice_default.html" %}
  {% endwith %}
  {% with lang="zh", text="嗨！你知道我们有中文站吗？立即带我去！", url="https://cn.ubuntu.com", icon="https://assets.ubuntu.com/v1/8114528b-picto-ubuntu-orange.png" %}
    {% include "shared/_notice_default.html" %}
  {% endwith %}
{% endblock notices_content %}