{% from 'components/links.html' import fancy_link %}
{% from 'components/fancy_image.html' import background_image %}
{% from 'components/image_link.html' import image_link %}

{% macro user_header(request, props) %}
  {% set artist_icon = g.freesites.kemono.user.icon(props.service, props.id) %}
  {% set artist_banner = g.freesites.kemono.user.banner(props.service, props.id) %}
  {% set paysite_icons = {
    'patreon': '/static/patreon.svg',
    'fanbox': '/static/fanbox.svg',
    'gumroad': '/static/gumroad.svg',
    'subscribestar': '/static/subscribestar.png',
    'dlsite': '/static/dlsite.png',
    'fantia': '/static/fantia.png',
    'onlyfans': '/static/onlyfans.svg',
    'fansly': '/static/fansly.svg',
    'candfans': '/static/candfans.png',
  } %}

  <header
    class="user-header"
    itemscope
    itemtype="https://schema.org/Person"
  >
    {{ background_image(
      artist_banner,
      is_lazy=false,
      class_name='user-header__background'
    ) }}

    {{ image_link(
      url=request.path,
      src=artist_icon,
      is_lazy=false,
      is_noop=false,
      class_name='user-header__avatar'
    ) }}

    <div class="user-header__info">
      <h1
        id="user-header__info-top"
        class="user-header__name"
      >
        <a
          class="user-header__profile"
          target="_blank"
          rel="noreferrer"
          href="{{ props.display_data.href }}"
          itemprop="url"
        >
          <span class="user-header__profile-image">
            <img
            src="{{ paysite_icons[props.service] }}"
          >
          </span>
          <span itemprop="name">{{ props.artist.name }}</span>
        </a>
      </h1>

      <div class="user-header__actions">
        <a
          class="user-header__upload"
          href="/posts/upload?service={{ props.service }}&user={{ props.id }}"
        >
          {# hiding the icon until the introduction of SVG icons #}
          {# <span>
            <img
              src="/static/upload.svg"
            >
          </span> #}
          <span>Upload file</span>
        </a>
      </div>
    </div>
  </header>
{% endmacro %}
