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

{% from "components/headers.html" import user_header %}

{% set paysite = g.paysites[props.service] %}
{% set page_title = "Link a new account to " ~ 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--new-linked-account">
  {{ user_header(request, props) }}
  <div class="paginator" id="paginator-top">
    {% include "components/tabs.html" %}
  </div>

  <p class="link-notice">If you believe this {{ g.artists_or_creators[:-1].lower() }} has other accounts on {{ g.site_name }}, you can use this form to request they be linked.</p>

  <form id="new_link_form" class="form form--wide" method="POST">
    <div class="form__section" id="artist-section">
      <span>
        <label class="form__label" for="service">Service:</label>
        <select id="service">
          <option value="all">All</option>
          {% for paysite in g.paysite_list %}
            <option value="{{ paysite }}">
              {{ g.paysites[paysite].title }}
            </option>
          {% endfor %}
        </select>
      </span>

      <span>
        <label class="form__label" for="creator_name">{{ g.artists_or_creators[:-1] }} Name:</label>
        <input id="creator_name" type="text">
      </span>

      <input type="hidden" id="creator" name="creator">
    </div>

    <div class="form__section" id="reason-section">
      <label class="form__label" for="reason">Reason:</label>
      <input id="reason" name="reason" type="text" placeholder="(optional) leave a reason for this link if needed">
    </div>

    <div class="form__section" id="button-section">
      <button id="submit" class="form__button form__button--submit" type="submit" disabled>
        Request link
      </button>
    </div>
  </form>

  <div class="card-list card-list--phone">
    <div id="lookup-result" class="card-list__items">
      Please select a creator.
    </div>
  </div>
</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 %}