{% extends "base.html" %}
{% load crispy_forms_tags %}
{% load static %}

{% block title %}
  Profile - Yamtrack
{% endblock title %}

{% block container %}

  <form method="post" class="mb-4">
    {% csrf_token %}
    <fieldset class="form-group">
      <legend class="border-bottom mb-4">Profile</legend>
      {% crispy user_form %}
    </fieldset>
  </form>

  <form method="post" class="mb-4">
    {% csrf_token %}
    <fieldset class="form-group">
      <legend class="border-bottom mb-4">Password Update</legend>
      {% crispy password_form %}
    </fieldset>
  </form>

  <div class="mb-4">
    <legend class="border-bottom mb-4">Import</legend>

    <fieldset class="input-group profile-grid">
      <form class="p-2 grid-item import-form"
            method="post"
            enctype="multipart/form-data"
            action="{% url 'import_tmdb_ratings' %}">
        {% csrf_token %}
        <div class="import-name">TMDB Ratings</div>
        <div class="input-group">
          <input type="file" class="form-control" name="tmdb_ratings">
          <button class="btn btn-secondary" type="submit">
            <i class="bi bi-check-lg"></i>
          </button>
        </div>
      </form>

      <form class="p-2 grid-item import-form"
            method="post"
            enctype="multipart/form-data"
            action="{% url 'import_tmdb_watchlist' %}">
        {% csrf_token %}
        <div class="import-name">TMDB Watchlist</div>
        <div class="input-group">
          <input type="file" class="form-control" name="tmdb_watchlist">
          <button class="btn btn-secondary" type="submit">
            <i class="bi bi-check-lg"></i>
          </button>
        </div>
      </form>

      <form class="p-2 grid-item import-form"
            method="get"
            action="{% url 'import_mal' %}">
        <div class="import-name">MyAnimeList Username</div>
        <div class="input-group">
          <input type="text" class="form-control" name="mal">
          <button class="btn btn-secondary" type="submit">
            <i class="bi bi-check-lg"></i>
          </button>
        </div>
      </form>

      <form class="p-2 grid-item import-form"
            method="get"
            action="{% url 'import_anilist' %}">
        <div class="import-name">AniList Username</div>
        <div class="input-group">
          <input type="text" class="form-control" name="anilist">
          <button class="btn btn-secondary" type="submit">
            <i class="bi bi-check-lg"></i>
          </button>
        </div>
      </form>

      <form class="p-2 grid-item import-form"
            method="get"
            action="{% url 'import_trakt' %}">
        <div class="import-name">
          Trakt Username Slug
          <span class="badge"
                data-bs-toggle="tooltip"
                data-bs-placement="top"
                title="Found at your Trakt profile URL">
            <i class="bi bi-question-circle"></i>
          </span>
        </div>
        <div class="input-group">
          <input type="text" class="form-control" name="trakt">
          <button class="btn btn-secondary" type="submit">
            <i class="bi bi-check-lg"></i>
          </button>
        </div>
      </form>

      <form class="p-2 grid-item import-form"
            method="get"
            action="{% url 'import_kitsu_name' %}">
        <div class="import-name">Kitsu by Username</div>
        <div class="input-group">
          <input type="text" class="form-control" name="kitsu_username">
          <button class="btn btn-secondary" type="submit">
            <i class="bi bi-check-lg"></i>
          </button>
        </div>
      </form>

      <form class="p-2 grid-item import-form"
            method="get"
            action="{% url 'import_kitsu_id' %}">
        <div class="import-name">
          Kitsu by ID
          <span class="badge"
                data-bs-toggle="tooltip"
                data-bs-placement="top"
                title="Found at your Kitsu profile URL">
            <i class="bi bi-question-circle"></i>
          </span>
        </div>
        <div class="input-group">
          <input type="text" class="form-control" name="kitsu_id">
          <button class="btn btn-secondary" type="submit">
            <i class="bi bi-check-lg"></i>
          </button>
        </div>
      </form>

      <form class="p-2 grid-item import-form"
            method="post"
            enctype="multipart/form-data"
            action="{% url 'import_yamtrack' %}">
        {% csrf_token %}
        <div class="import-name">Yamtrack CSV</div>
        <div class="input-group">
          <input type="file" class="form-control" name="yamtrack_csv">
          <button class="btn btn-secondary" type="submit">
            <i class="bi bi-check-lg"></i>
          </button>
        </div>
      </form>
    </fieldset>
  </div>

  <div class="mb-4">
    <legend class="border-bottom mb-4">Export</legend>

    <fieldset class="input-group profile-grid">
      <form class="p-2 grid-item" method="get" action="{% url 'export_csv' %}">
        <button class="btn btn-secondary w-100" type="submit">Export as CSV</button>
      </form>
    </fieldset>
  </div>

  <div class="mb-4">
    <legend class="border-bottom mb-4">Other</legend>

    <fieldset class="input-group profile-grid">
      <form class="p-2 grid-item"
            method="get"
            action="{% url 'reload_calendar' %}">
        <button class="btn btn-secondary w-100" type="submit">Reload Calendar</button>
      </form>
    </fieldset>
  </div>

{% endblock container %}

{% block js %}
  <script src="{% static 'js/spinner.js' %}"></script>

  {% comment %} Enable bootstrap tooltips {% endcomment %}
  <script>
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
  </script>
{% endblock js %}
