{% extends "components/shell.html" %}

{% from "components/card_list.html" import card_list %}
{% from "components/headers.html" import user_header %}
{% from "components/cards/user.html" import user_card %}

{% set paysite = g.paysites[props.service] %}
{% set page_title = "Linked accounts for " ~ props.artist.name ~ " on " ~ paysite.title ~ " | " ~ g.site_name %}

{% block title %}
  <title>{{ page_title }}</title>
{% endblock %}

{% block meta %}
  <meta name="id" content="{{ props.id }}">
  <meta name="service" content="{{ props.service }}">
  <meta name="artist_name" content="{{ props.artist.name }}">
  <link rel="canonical" href="{{ g.canonical_url }}">
{% endblock meta %}

{% block opengraph %}
  <meta property="og:title" content="{{ page_title }}">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="{{ g.site_name }}">
  <meta property="og:image" content="{{ g.icons_prepend | default(g.origin) }}/icons/{{ props.service }}/{{ props.id }}">
  <meta property="og:url" content="{{ g.canonical_url }}">
{% endblock opengraph %}

{% block content %}
<section class="site-section  site-section--user site-section--linked-account">
  {{ user_header(request, props) }}
  <div class="paginator" id="paginator-top">
    {% include "components/tabs.html" %}
  </div>

  <div id="add-new-link">
    <a href="/{{ props.service }}/user/{{ props.id }}/links/new">Link another account</a>
  </div>

  {% call card_list('phone') %}
    {% for user in links %}
      {{ user_card(user) }}
    {% else %}
      <p class="subtitle card-list__item--no-results">
        No linked accounts found.
      </p>
    {% endfor %}
  {% endcall %}
</section>
{% endblock %}

{% block components %}
  <button class="user-header__favourite" type="button">
    <span class="user-header__fav-icon">☆</span>
    <span class="user-header__fav-text">Favorite</span>
  </button>
  {{ loading_icon() }}
{% endblock components %}