_details.html

<h2 class="u-off-screen">Details for {{ snap_title }}</h2>

<h3 class="p-muted-heading">Package name</h3>
<ul class="p-list">
  <li>{{ package_name }}</li>
</ul>
<hr class="p-rule--muted">

<h3 class="p-muted-heading">License</h3>
<ul class="p-list">
  <li>{{ license }}</li>
</ul>
<hr class="p-rule--muted">

{% if updates %}
  <h3 class="p-muted-heading">Last updated</h3>
  <ul class="p-list">
    {% if updates[0] %}
      <li>{{ updates[0]["released-at-display"] }} - <small>{{ updates[0]["track"] }}/{{ updates[0]["risk"] }}</small></li>
    {% endif %}
    {% if updates[1] %}
      <li>{{ updates[1]["released-at-display"] }} - <small>{{ updates[1]["track"] }}/{{ updates[1]["risk"] }}</small></li>
    {% endif %}
  </ul>
  {% if is_snap_old %}
  <div class="p-notification--caution is-borderless">
    <div class="p-notification__content">
      <p class="p-notification__message">
        This snap hasn't been updated in a while. It might be unmaintained and have stability or security issues.
      </p>
    </div>
  </div>
  {% endif %}
  <hr class="p-rule--muted">
{% endif %}

{% if links %}
  {% if links["website"] %}
    <h3 class="p-muted-heading">Websites</h3>
    <ul class="p-list">
      {% for link in links["website"] %}
        {% if format_link(link) != None %}
        <li {% if loop.index == 1 %}data-js="primary-domain"{% endif %}>
          <a class="js-external-link" title="{{ link }}" href="{{ link }}" aria-controls="modal">{{ format_link(link) }}</a>
        </li>
        {% endif %}
      {% endfor %}
    </ul>
    <hr class="p-rule--muted">
  {% endif %}

  {% if links["contact"] %}
    <h3 class="p-muted-heading">Contact</h3>
    <ul class="p-list">
      {% for link in links["contact"] %}
        {% if format_link(link) != None %}
        <li>
          <a class="js-external-link" title="{{ link }}" href="{{ link }}" aria-controls="modal">{{ format_link(link) }}</a>
        </li>
        {% endif %}
      {% endfor %}
    </ul>
    <hr class="p-rule--muted">
  {% endif %}

  {% if links["donations"] %}
    <h3 class="p-muted-heading">Donations</h3>
    <ul class="p-list">
      {% for link in links["donations"] %}
        {% if format_link(link) != None %}
        <li>
          <a class="js-external-link" title="{{ link }}" href="{{ link }}" aria-controls="modal">{{ format_link(link) }}</a>
        </li>
        {% endif %}
      {% endfor %}
    </ul>
    <hr class="p-rule--muted">
  {% endif %}

  {% if links["source"] %}
    <h3 class="p-muted-heading">Source code</h3>
    <ul class="p-list">
      {% for link in links["source"] %}
        {% if format_link(link) != None %}
        <li>
          <a class="js-external-link" title="{{ link }}" href="{{ link }}" aria-controls="modal">{{ format_link(link) }}</a>
        </li>
        {% endif %}
      {% endfor %}
    </ul>
    <hr class="p-rule--muted">
  {% endif %}

  {%- if aliases -%}
    {%- set show_more = "Show more" -%}
    {%- set show_less = "Show less" -%}

    {#-
    # The list starts displaying maximum 3 elements with the rest hidden.
    # With the script provided and the link element rendered the user can toggle
    # displaying and hiding all the aliases.
    -#}
    <h3 class="p-muted-heading">Command &rsaquo; Alias</h3>
    <ul class="p-list js-expandable-list">
      {%- set aliases_len = aliases|length -%}
      {%- set default_visible_aliases = 3 -%}
      {%- for alias in aliases -%}
        {%- set invisible_class = "" -%}
        {%- if loop.index > default_visible_aliases -%}
          {%- set invisible_class = "js-hidable u-hide" -%}
        {%- endif -%}
        <li class="p-list__item {{ invisible_class }}">
          {{ alias[0]|safe }} &rsaquo; {{ alias[1]|safe }}
        </li>
      {%- endfor -%}
      {%- if aliases_len > default_visible_aliases -%}
        <li class="p-list__item">
          <a class="js-toggle-full-list" href="#" title="Display more/less aliases">
            {{ show_more }}
          </a>
        </li>
      {%- endif -%}
    </ul>
    <hr class="p-rule--muted">

    <script>
      // Handle aliases "show more" button
      const list = document.querySelector(".js-expandable-list");
      const showMoreButton = document.querySelector(".js-toggle-full-list");
      let hasAllElementsDisplayed = false;

      const updateAliasesListUI = (displayAllElements, elements) => {
        // change button
        showMoreButton.innerHTML = displayAllElements ? "{{ show_less }}" : "{{ show_more }}";
        // toggle hide classes
        for (const element of elements) {
          element.classList.toggle('u-hide', !displayAllElements);
        }
      }

      if (list && showMoreButton) {
        const listElements = list.querySelectorAll(".js-hidable");
        showMoreButton.addEventListener("click", (e) => {
          e.preventDefault();
          // switch toggle
          hasAllElementsDisplayed = !hasAllElementsDisplayed;
          updateAliasesListUI(hasAllElementsDisplayed, listElements);
        });
      }
    </script>
  {%- endif -%}

  {% if links["issues"] %}
    <h3 class="p-muted-heading">Report a bug</h3>
    <ul class="p-list">
      {% for link in links["issues"] %}
        {% if format_link(link) != None %}
        <li>
          <a class="js-external-link" title="{{ link }}" href="{{ link }}" aria-controls="modal">{{ format_link(link) }}</a>
        </li>
        {% endif %}
      {% endfor %}
    </ul>
    <hr class="p-rule--muted">
  {% endif %}

  <div class="p-modal js-exeternal-link-modal u-hide" id="modal">
    <section class="p-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-description">
      <header class="p-modal__header">
        <h2 class="p-modal__title" id="modal-title"><i class="p-icon--warning" style="width: 1rem; height: 1rem; position: relative; top: 1px; margin-right: 0.24rem;"></i> External link warning</h2>
      </header>
      <p class="u-no-max-width">You are about to open <span class="js-external-link-url"></span></p>
      <p class="u-no-max-width">Do you wish to proceed?</p>
      </p>
      <footer class="p-modal__footer">
        <button class="u-no-margin--bottom js-close-modal" aria-controls="modal">Go back</button>
        <a class="p-button--positive u-no-margin--bottom js-open-external-link" href="" target="_blank">Proceed</a>
      </footer>
    </section>
  </div>

  <template id="verified-status">
    (Ownership verified)
    <span class="p-tooltip--btm-right" aria-describedby="verified-explanation">
      <i class="p-icon--information"></i>
      <span class="p-tooltip__message" role="tooltip" id="verified-explanation">The publisher has verified that they own this domain{%- if developer_validation != VERIFIED_PUBLISHER -%}.
It does not guarantee the Snap is an official upload
from the upstream project.{%- endif -%}</span>
  </template>

  <script>
    // Handle verified domain status
    const primaryDomainListItem = document.querySelector("[data-js='primary-domain']");

    function renderVerificationStatus() {
      if ("content" in document.createElement("template")) {
        const template = document.querySelector("#verified-status");
        const clone = template.content.cloneNode(true);
        primaryDomainListItem.appendChild(clone);
      }
    }

    if (primaryDomainListItem) {
      async function getVerifiedStatus() {
        const response = await fetch("/api/{{ package_name }}/verify");

        if (!response.ok) {
          return;
        }

        const responseData = await response.json();

        if (responseData.primary_domain) {
          renderVerificationStatus();
        }
      }

      getVerifiedStatus();
    }

    // Handle external links
    const externalLinks = document.querySelectorAll(".js-external-link");
    const externalLinkModal = document.querySelector(".js-exeternal-link-modal");
    const externalLinkModalCloseButton = externalLinkModal.querySelector(
      ".js-close-modal"
    );
    const externalLinkUrl = externalLinkModal.querySelector(
      ".js-external-link-url"
    );
    const openExternalLinkButton = externalLinkModal.querySelector(
      ".js-open-external-link"
    );

    function openModal() {
      externalLinkModal.classList.remove("u-hide");
    }

    function closeModal() {
      externalLinkModal.classList.add("u-hide");
    }

    function setLinkDisplayText(href) {
      if (href.includes("mailto")) {
        externalLinkUrl.innerText = href;
        return;
      }

      const url = new URL(href);

      const protocolContainer = document.createElement("strong");
      const hostnameContainer = document.createElement("strong");
      const pathContainer = document.createElement("span");
      const searchContainer = document.createElement("span");

      protocolContainer.classList.add(
        url.protocol === "https:" ?
          "external-link-protocol--positive" : "external-link-protocol--negative"
      );

      pathContainer.classList.add("u-text-muted");
      searchContainer.classList.add("u-text-muted");

      protocolContainer.innerText = `${url.protocol}//`;
      hostnameContainer.innerText = url.hostname;

      if (url.pathname && url.pathname !== "/") {
        pathContainer.innerText = url.pathname;

      }

      searchContainer.innerText = url.search;

      externalLinkUrl.innerHTML = "";
      externalLinkUrl.appendChild(protocolContainer);
      externalLinkUrl.appendChild(hostnameContainer);
      externalLinkUrl.appendChild(pathContainer);
      externalLinkUrl.appendChild(searchContainer);
    }

    externalLinkModalCloseButton.addEventListener("click", () => {
      closeModal();
    });

    externalLinks.forEach((link) => {

      link.addEventListener("click", (e) => {
        e.preventDefault();
        const href = e.target.href;
        openExternalLinkButton.href = href;
        openExternalLinkButton.addEventListener("click", handleOpenExternalLink);
        setLinkDisplayText(href);
        openModal();
      });
    });

    function handleOpenExternalLink() {
      closeModal();
      openExternalLinkButton.removeEventListener("click", handleOpenExternalLink);
    }
  </script>
{% endif %}

{# REPORT SNAP SECTION - hidden in preview #}
{% if not is_preview and not IS_BRAND_STORE %}
  <h5 class="p-muted-heading">Report a Snap Store violation</h5>
  <ul class="p-list">
    <li>
      <a class="js-modal-open" aria-controls="#report-snap-modal" href="#report-snap-modal">Report this Snap</a>
    </li>
  </ul>

  {% include "store/snap-details/_report_snap_modal.html" %}
  <hr class="p-rule--muted">
{% endif %}