_package_header_data.html

{%- from 'store/package_header/_developer_info.html' import developer_info -%}
{%- from 'store/package_header/_publisher_info.html' import publisher_info -%}

{%- macro package_icon(
    icon_url,
    image) -%}
  {% if not icon_url %}
    {% set icon_url = "https://assets.ubuntu.com/v1/be6eb412-snapcraft-missing-icon.svg" %}
  {% endif %}

  {% if icon_url.startswith("blob") %}
    <img src="{{ icon_url | safe }}"
          alt=""
          width="120"
          height="120"
          data-live="icon" />
  {% else %}
    {{ image(url=icon_url,
          alt="",
          width=120,
          height=120,
          hi_def=True,
          loading="eager",
          attrs={"data-live": "icon"}) | safe
    }}
  {% endif %}
{%- endmacro -%}

{%- macro package_header_data(
    package_title,
    package_name,
    icon_url,
    developer,
    categories,
    image,
    display_name,
    username,
    publisher,
    developer_validation,
    STAR_DEVELOPER,
    VERIFIED_PUBLISHER) -%}
  <div class="p-section--shallow p-package-header">
    <h1 class="u-sv-1" data-live="title">
      {{ package_title }}

      {# check if the package title could be misleading #}
      {% if package_title.replace(" ", "-").lower() != package_name %}
      <span class="p-tooltip--btm-center p-package-header__name" style="--length: {{ package_name | length }};" aria-label='(registered as "{{ package_name }}")'>
        ({{ package_name }})
        <span class="p-tooltip__message">Package name</span>
      </span>
      {% endif %}
    </h1>
    <div class="u-hide--medium u-hide--large">
      {% if developer %}
        {{ developer_info(name=developer[0], url=developer[1]) }}
      {% endif %}
      {{ publisher_info(publisher, username, developer_validation, display_name, VERIFIED_PUBLISHER, STAR_DEVELOPER) }}
    </div>
    <ul class="p-inline-list--vertical-divider">
      {% if developer %}
        <li class="p-inline-list__item u-hide--small">{{ developer_info(name=developer[0], url=developer[1]) }}</li>
      {% endif %}
      <li class="p-inline-list__item u-hide--small">{{ publisher_info(publisher, username, developer_validation, display_name, VERIFIED_PUBLISHER, STAR_DEVELOPER) }}</li>
      {% for category in categories %}
        <li class="p-inline-list__item">
          <a href="/search?categories={{ category.slug }}">{{ category.name }}</a>
        </li>
      {% endfor %}
    </ul>
  </div>
{%- endmacro -%}