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

{% macro user_card_header(is_count=false, is_date=false) %}
  <header class="user-card user-card--header">
    <div class="user-card__icon">Icon</div>
    <div class="user-card__name">Name</div>
    <div class="user-card__service">Service</div>
    {% if is_count %}
      <div class="user-card__count">Times favorited</div>
    {% endif %}
    {% if is_date %}
      <div class="user-card__updated">Updated</div>
    {% else %}
    {% endif %}
  </header>
{% endmacro %}

{% macro user_card(
  user, 
  is_updated=false,
  is_indexed=false,
  is_count=false,
  single_of='',
  plural_of='',
  is_date=false,
  class_name=none
) %}
  {% set user_link = g.freesites.kemono.user.profile(user.service, user.id) %}
  {% set user_icon = g.freesites.kemono.user.icon(user.service, user.id) %}
  {% set user_banner = g.freesites.kemono.user.banner(user.service, user.id) %}

  <a
    href="{{ user_link }}"
    class="user-card {{ class_name if class_name }}"
    data-id="{{ user.id }}"
    data-service="{{ user.service }}"
    data-style="background-image: linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 80%)), url({{user_banner}});"
  >
    {# Icon. #}
    <div class="user-card__icon">
      <div class="user-card__user-icon">
        {{ fancy_image(src=user_icon) }}
      </div>
    </div>

    {# Secondary identifiers and elements. #}
    <div class="user-card__info">
      <span
        class="user-card__service"
        style="background-color: {{ g.paysites[user.service].color }};"
      >
        {{ g.paysites[user.service].title }}
      </span>

      <div class="user-card__name">{{ user.name }}</div>

      {% if is_updated %}
        <div class="user-card__updated">
          {{ timestamp(user.updated) }}
        </div>
      {% endif %}
      {% if is_indexed %}
        <div class="user-card__updated">
          {{ timestamp(user.indexed) }}
        </div>
      {% endif %}
      {% if is_count %}
        <div class="user-card__count">
          {% if user.count %}
            <b>{{ user.count }}</b> {{ plural_of if user.count > 1 else single_of }}
          {% else %}
            {{ 'No ' ~ plural_of if plural_of else 'None' }}
          {% endif %}
        </div>
      {% endif %}
    </div>
  </a>
{% endmacro %}

{% macro user_card_skeleton() %}
  <a class="user-card">
    <div class="user-card__icon"></div>
    <div class="user-card__info">
      <span class="user-card__service"></span>
      <div class="user-card__name"></div>
      <div class="user-card__updated"></div>
      <div class="user-card__count"></div>
    </div>
  </a>
{% endmacro %}
