{% load i18n %}
{% load static %}
<!DOCTYPE html>
<html lang="zh" class="login-page">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta property="og:title" content="{{ site_name }}">
    <meta name="description"
          property="og:description"
          content="{{ site_description }}">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ site_url }}">
    <meta property="og:image" content="{{ site_logo }}">
    <meta property="og:site_name" content="{{ site_name }}">
    <title>{{ site_name }} - {% trans 'Register' %} / {% trans "Login" %}</title>
    {% include "common_libs.html" %}
    <meta name="robots" content="noindex">
    <script src="{{ cdn_url }}/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"></script>
    <script src="{{ cdn_url }}/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>
    <script>
    $(document).ready(function () {
      if (!window.htmx || !window._hyperscript) return; // disable login if cash, htmx or hyperscript not loaded
      $('.delayed').remove(); $('#loginButton').prop("disabled", false);
    });
    </script>
    <style type="text/css">
    .delayed {
      animation: 10s _fadeIn;
      animation-fill-mode: forwards;
      visibility: hidden;
    }
    @keyframes _fadeIn {
      99% {
        visibility: hidden;
      }
      100% {
        visibility: visible;
        opacity: 1;
      }
    }
    </style>
  </head>
  <body>
    <article>
      <header>
        <img src="{{ site_logo }}" class="logo" alt="logo">
      </header>
      <div>
        {% if request.user.is_authenticated %}
          <a href="{{ request.session.next_url | default:'/' }}" class="button">{% trans 'back to your home page.' %}</a>
        {% elif allow_any_site %}
          <div role="group">
            {% if enable_email %}
              <button class="platform outline" _="on click add .outline to .platform then remove .outline from me then hide
                <form/>
                then show #login-email" id="platform-email" title="{% trans "Email" %}">
                <i class="fa-solid fa-envelope"></i>
              </button>
            {% endif %}
            <button class="platform outline" _="on click add .outline to .platform then remove .outline from me then hide
              <form/>
              then show #login-mastodon" id="platform-mastodon" title="{% trans "Fediverse (Mastodon)" %}">
              <svg xmlns="http://www.w3.org/2000/svg"
                   viewBox="64 163 873 873"
                   style="width: 1em;
                          color: var(--pico-color);
                          padding-bottom: 0.2em">
                <path d="M539 176q-32 0 -55 22t-25 55t20.5 58t56 27t58.5 -20.5t27 -56t-20.5 -59t-56.5 -26.5h-5zM452 271l-232 118q20 20 25 48l231 -118q-19 -20 -24 -48zM619 298q-13 25 -38 38l183 184q13 -25 39 -38zM477 320l-135 265l40 40l143 -280q-28 -5 -48 -25zM581 336 q-22 11 -46 10l-8 -1l21 132l56 9zM155 370q-32 0 -55 22.5t-25 55t20.5 58t56.5 27t59 -21t26.5 -56t-21 -58.5t-55.5 -27h-6zM245 438q1 9 1 18q-1 19 -10 35l132 21l26 -50zM470 474l-26 51l311 49q-1 -8 -1 -17q1 -19 10 -36zM842 480q-32 1 -55 23t-24.5 55t21 58 t56 27t58.5 -20.5t27 -56.5t-20.5 -59t-56.5 -27h-6zM236 493q-13 25 -39 38l210 210l51 -25zM196 531q-21 11 -44 10l-9 -1l40 256q21 -10 45 -9l8 1zM560 553l48 311q21 -10 44 -9l10 1l-46 -294zM755 576l-118 60l8 56l135 -68q-20 -20 -25 -48zM781 625l-119 231 q28 5 48 25l119 -231q-28 -5 -48 -25zM306 654l-68 134q28 5 48 25l60 -119zM568 671l-281 143q19 20 24 48l265 -135zM513 771l-51 25l106 107q13 -25 39 -38zM222 795q-32 0 -55.5 22.5t-25 55t21 57.5t56 27t58.5 -20.5t27 -56t-20.5 -58.5t-56.5 -27h-5zM311 863 q2 9 1 18q-1 19 -9 35l256 41q-1 -9 -1 -18q1 -18 10 -35zM646 863q-32 0 -55 22.5t-24.5 55t20.5 58t56 27t59 -21t27 -56t-20.5 -58.5t-56.5 -27h-6z" />
              </svg>
              <!--<i class="fa-brands fa-mastodon"></i>-->
            </button>
            {% if enable_threads %}
              <button class="platform outline" _="on click add .outline to .platform then remove .outline from me then hide
                <form/>
                then show #login-threads" id="platform-threads" title="{% trans "Threads" %}">
                <i class="fa-brands fa-threads"></i>
              </button>
            {% endif %}
            {% if enable_bluesky %}
              <button class="platform outline" _="on click add .outline to .platform then remove .outline from me then hide
                <form/>
                then show #login-bluesky" id="platform-bluesky" title="{% trans "Bluesky (ATProto)" %}">
                <i class="fa-brands fa-bluesky" style="font-size:85%"></i>
              </button>
            {% endif %}
          </div>
          <form id="login-email"
                style="display:none"
                action="{% url 'mastodon:email_login' %}"
                method="post"
                onsubmit="return login(this);">
            {% csrf_token %}
            <input name="method" value="email" type="hidden" />
            <input required
                   name="email"
                   id="email"
                   type="email"
                   placeholder="{% trans 'Enter your email address' %}"
                   autocomplete="email" />
            <input type='submit' value="{% trans 'Send verification code' %}" />
          </form>
          <form id="login-mastodon"
                style="display:none"
                action="{% url 'mastodon:login' %}"
                method="post"
                onsubmit="return login(this);">
            {% csrf_token %}
            <input name="method" value="mastodon" type="hidden" />
            <input required
                   type="text"
                   name="domain"
                   id="domain"
                   autofocus
                   pattern="(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,})"
                   placeholder="{% trans 'Domain of your instance, e.g. mastodon.social' %}"
                   autocorrect="off"
                   autocapitalize="off"
                   autocomplete="off"
                   spellcheck="false" />
            <small id="mastodon">
              {% blocktrans %}Please enter domain of your instance; e.g. if your id is <i>@neodb@mastodon.social</i>, only enter <i>mastodon.social</i>.{% endblocktrans %}
            </small>
            <br>
            <input type='submit' value="{% trans 'Authorize via Fediverse instance' %}" />
            <small>
              {% blocktrans %}If you don't have a <a href="https://joinmastodon.org/servers" target="_blank">Fediverse (Mastodon) account</a> yet, you may register or login with Email first, and link it with Fediverse (Mastodon) later in account settings.{% endblocktrans %}
            </small>
          </form>
          <form id="login-threads"
                style="display:none"
                action="{% url 'mastodon:threads_login' %}"
                method="post"
                onsubmit="return login(this);">
            {% csrf_token %}
            <input name="method" value="threads" type="hidden" />
            <input type='submit' value="{% trans 'Authorize via Threads' %}" />
          </form>
          <form id="login-bluesky"
                style="display:none"
                action="{% url 'mastodon:bluesky_login' %}"
                method="post"
                onsubmit="return login(this);">
            {% csrf_token %}
            <input name="method" value="bluesky" type="hidden" />
            <input required
                   name="username"
                   autofocus
                   pattern="([a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?"
                   placeholder="{% trans 'ATProto handle' %}"
                   autocorrect="off"
                   autocapitalize="off"
                   autocomplete="off"
                   spellcheck="false" />
            <small>{% trans "Please input your ATProto handle (e.g. neodb.bsky.social, without the leading @), do not use email. If you changed handle recently, just use the latest one." %}</small>
            <input required
                   type="password"
                   name="password"
                   placeholder="{% trans 'Bluesky app password' %}"
                   autocorrect="off"
                   autocapitalize="off"
                   autocomplete="off"
                   spellcheck="false" />
            <small>{% blocktrans %}App password can be created on <a href="https://bsky.app/settings/app-passwords" target="_blank">bsky.app</a>.{% endblocktrans %}</small>
            <input type='submit' value="{% trans 'Authorize via bsky.app' %}" />
          </form>
          <form>
            <div style="margin:0 1em;">
              {% blocktrans %}Please choose one to register or login {{site_name}}. Have more than one of these identities? Don't worry, you may link them in account settings once logged in.{% endblocktrans %}
            </div>
          </form>
        {% else %}
          <form>
            <select name="domain">
              {% for site in sites %}<option value="{{ site }}">@{{ site }}</option>{% endfor %}
            </select>
            <input type='submit'
                   value="{% trans 'Authorize via Fediverse instance' %}"
                   id="loginButton" />
          </form>
        {% endif %}
        {% if invite_status %}
          <small>
            {% if invite_status == 1 %}
              <i class="fa-solid fa-circle-check"></i> {% trans "Valid invitation code, please login or register." %}
            {% elif invite_status == -1 %}
              <i class="fa-solid fa-person-circle-question"></i> {% trans "Please use invitation link to register a new account; existing user may login." %}
            {% elif invite_status == -2 %}
              <i class="fa-solid fa-circle-xmark"></i> {% trans "Invitation code invalid or expired." %}
            {% endif %}
          </small>
        {% endif %}
        <small class="hide_unless_alter_domain">
          <br>
          {% blocktrans %}You are visiting an alternative domain for {{ site_name }}, please always use <a href="{{ site_url }}{{ request.get_full_path }}">original version</a> if possible.{% endblocktrans %}
        </small>
        <div class="delayed">{% trans "Loading timed out, please check your network (VPN) settings." %}</div>
      </div>
    </article>
    <footer>
      <br>
      <small>
        {% blocktrans %}Continue using this site implies consent to our <a href="/pages/rules/">rules</a> and <a href="/pages/terms/">terms</a>, including using cookies to provide necessary functionality.{% endblocktrans %}
      </small>
    </footer>
    {{ sites|json_script:"sites-data" }}
    <script>
    const sites = JSON.parse(document.getElementById('sites-data').textContent);
    const autoCompleteJS = new autoComplete({ placeHolder: "{% trans 'Domain of your instance (excl. @)' %}",
      selector: "#domain",
      // wrapper: false,
      data: {
          src: sites
      },
      submit: true,
      resultsList: {
        tabSelect: true,
        maxResults: 10
      },
      events: {
        input: {
          selection: (event) => {
            const selection = event.detail.selection.value;
            autoCompleteJS.input.value = selection;
          }
        }
      }
    });

    function login(f){
      localStorage.login_method = $(f).find('input[name="method"]').val();
      localStorage.mastodon_domain = $('#domain').val();
      localStorage.email = $('#email').val();
      return true;
    }
    $(()=>{
      var selected_domain = '{{selected_domain}}';
      var method = localStorage.login_method;
      if (!!selected_domain) {
        method = "mastodon";
        $('#domain').val(selected_domain);
      } else if (!!method) {
        $('#domain').val(localStorage.mastodon_domain);
        $('#email').val(localStorage.email);
      } else {
        // restire cookie from previous versions
        var d = Cookies.get('mastodon_domain');
        if (d) {
          if (d == "@") {
            method = "email";
          } else {
            method = "mastodon";
            $('#domain').val(Cookies.get('mastodon_domain'));
          }
        }
      }
      if (!!method) {
        $('#platform-' + method).removeClass('outline');
        $('#login-' + method).show();
      }
    })
    </script>
  </body>
</html>
