{% extends 'base.html' %}
{% load i18n %}
{% load static %}

{% block header %}
<style>
  /* Base tile styles - highest specificity */
  .custom-select-grid .select-option,
  .form-group .custom-select-grid .select-option,
  div.custom-select-grid div.select-option {
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    border: 2px solid #dee2e6 !important;
    background-color: #fff !important;
    color: #333 !important;
    padding: 1rem !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
    min-height: 100px !important;
    justify-content: center !important;
  }

  /* Hover state for non-selected tiles */
  .custom-select-grid .select-option:hover:not(.selected),
  .form-group .custom-select-grid .select-option:hover:not(.selected),
  div.custom-select-grid div.select-option:hover:not(.selected) {
    border-color: #335ecf !important;
    background-color: #e8f0ff !important;
    color: #335ecf !important;
    transform: translateY(-2px) !important;
  }

  .custom-select-grid .select-option:hover:not(.selected) .select-option-text,
  .form-group .custom-select-grid .select-option:hover:not(.selected) .select-option-text,
  div.custom-select-grid div.select-option:hover:not(.selected) .select-option-text {
    color: #335ecf !important;
    font-weight: 500 !important;
  }

  /* Selected state - always takes priority */
  .custom-select-grid .select-option.selected,
  .form-group .custom-select-grid .select-option.selected,
  div.custom-select-grid div.select-option.selected {
    background-color: #335ecf !important;
    border-color: #335ecf !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(51, 94, 207, 0.4) !important;
    transform: translateY(-1px) !important;
  }

  .custom-select-grid .select-option.selected .select-option-text,
  .form-group .custom-select-grid .select-option.selected .select-option-text,
  div.custom-select-grid div.select-option.selected .select-option-text {
    color: #fff !important;
    font-weight: 600 !important;
  }

  .custom-select-grid .select-option.selected .select-option-preview,
  .form-group .custom-select-grid .select-option.selected .select-option-preview,
  div.custom-select-grid div.select-option.selected .select-option-preview {
    border-color: rgba(255, 255, 255, 0.5) !important;
  }

  /* Selected state hover - slightly different shade */
  .custom-select-grid .select-option.selected:hover,
  .form-group .custom-select-grid .select-option.selected:hover,
  div.custom-select-grid div.select-option.selected:hover {
    background-color: #2a4bb8 !important;
    border-color: #2a4bb8 !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(51, 94, 207, 0.5) !important;
  }

  .custom-select-grid .select-option.selected:hover .select-option-text,
  .form-group .custom-select-grid .select-option.selected:hover .select-option-text,
  div.custom-select-grid div.select-option.selected:hover .select-option-text {
    color: #fff !important;
    font-weight: 600 !important;
  }

  /* Force all child elements in selected state */
  .custom-select-grid .select-option.selected *,
  .form-group .custom-select-grid .select-option.selected *,
  div.custom-select-grid div.select-option.selected * {
    color: #fff !important;
  }

  /* Ensure selected state persists even with inline styles */
  .select-option[data-selected="true"] {
    background-color: #335ecf !important;
    border-color: #335ecf !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(51, 94, 207, 0.4) !important;
  }

  .select-option[data-selected="true"] .select-option-text {
    color: #fff !important;
    font-weight: 600 !important;
  }

  /* Override any potential theme conflicts */
  body .select-option.selected,
  html .select-option.selected {
    background-color: #335ecf !important;
    border-color: #335ecf !important;
    color: #fff !important;
  }
</style>
{% endblock header %}

{% block title %}{% trans 'Check e-mail or openid' %}{% endblock title %}

{% block content %}

<h1>{% trans 'Check e-mail or openid' %}</h1>

<div class="check-layout">
  <div class="check-form-section">
    {% if form.errors %}
    {% for error in form.non_field_errors %}
    <div class="alert alert-danger" role="alert">{{ error|escape }}</div>
    {% endfor %}
    {% endif %}

    <div class="form-container">
      <form method="post" name="check">
        {% csrf_token %}
        <div class="form-group">
          <label for="id_mail" class="form-label">{% trans 'E-Mail' %}</label>
          {% if form.mail.value %}
          <input type="email" name="mail" maxlength="254" minlength="6" class="form-control"
            placeholder="{% trans 'E-Mail' %}" value="{{ form.mail.value }}" id="id_mail">
          {% else %}
          <input type="email" name="mail" maxlength="254" minlength="6" class="form-control"
            placeholder="{% trans 'E-Mail' %}" id="id_mail">
          {% endif %}
        </div>
        <div class="form-group">
          <label for="id_openid" class="form-label">{% trans 'OpenID' %}</label>
          {% if form.openid.value %}
          <input type="text" name="openid" maxlength="255" minlength="11" class="form-control"
            placeholder="{% trans 'OpenID' %}" value="{{ form.openid.value }}" id="id_openid">
          {% else %}
          <input type="text" name="openid" maxlength="255" minlength="11" class="form-control"
            placeholder="{% trans 'OpenID' %}" id="id_openid">
          {% endif %}
        </div>
        <div class="form-group">
          <label for="id_size" class="form-label">{% trans 'Size' %}</label>
          {% if form.size.value %}
          <input type="number" name="size" min="5" max="512" class="form-control" placeholder="{% trans 'Size' %}"
            value="{{ form.size.value }}" required id="id_size">
          {% else %}
          <input type="number" name="size" min="5" max="512" class="form-control" placeholder="{% trans 'Size' %}"
            value="100" required id="id_size">
          {% endif %}
        </div>
        <div class="form-group">
          <label for="id_default_url" class="form-label">{% trans 'Default URL or special keyword' %}</label>
          {% if form.default_url.value %}
          <input type="text" name="default_url" class="form-control" placeholder="{% trans 'Default' %}"
            value="{{ form.default_url.value }}" id="id_default_url">
          {% else %}
          <input type="text" name="default_url" class="form-control" placeholder="{% trans 'Default' %}"
            id="id_default_url">
          {% endif %}
        </div>
        <div class="form-group">
          <label class="form-label">{% trans 'Default (special keyword)' %}</label>
          <input type="hidden" name="default_opt" id="id_default_opt"
            value="{% if form.default_opt.value %}{{ form.default_opt.value }}{% endif %}">
          <div class="custom-select-grid">
            <div class="select-option {% if form.default_opt.value == 'retro' %}selected{% endif %}" data-value="retro">
              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=retro&forcedefault=y" alt="Retro preview"
                class="select-option-preview">
              <span class="select-option-text">Retro (d=retro)</span>
            </div>
            <div class="select-option {% if form.default_opt.value == 'robohash' %}selected{% endif %}"
              data-value="robohash">
              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=robohash&forcedefault=y" alt="Roboter preview"
                class="select-option-preview">
              <span class="select-option-text">Roboter (d=robohash)</span>
            </div>
            <div class="select-option {% if form.default_opt.value == 'wavatar' %}selected{% endif %}"
              data-value="wavatar">
              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=wavatar&forcedefault=y" alt="Wavatar preview"
                class="select-option-preview">
              <span class="select-option-text">Wavatar (d=wavatar)</span>
            </div>
            <div class="select-option {% if form.default_opt.value == 'monsterid' %}selected{% endif %}"
              data-value="monsterid">
              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=monsterid&forcedefault=y" alt="Monster preview"
                class="select-option-preview">
              <span class="select-option-text">Monster (d=monsterid)</span>
            </div>
            <div class="select-option {% if form.default_opt.value == 'identicon' %}selected{% endif %}"
              data-value="identicon">
              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=identicon&forcedefault=y"
                alt="Identicon preview" class="select-option-preview">
              <span class="select-option-text">Identicon (d=identicon)</span>
            </div>
            <div class="select-option {% if form.default_opt.value == 'mm' %}selected{% endif %}" data-value="mm">
              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=mm&forcedefault=y" alt="Mystery man preview"
                class="select-option-preview">
              <span class="select-option-text">Mystery man (d=mm)</span>
            </div>
            <div class="select-option {% if form.default_opt.value == 'mmng' %}selected{% endif %}" data-value="mmng">
              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=mmng&forcedefault=y"
                alt="Mystery man NG preview" class="select-option-preview">
              <span class="select-option-text">Mystery man NG (d=mmng)</span>
            </div>
            <div class="select-option {% if form.default_opt.value == 'pagan' %}selected{% endif %}" data-value="pagan">
              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=pagan&forcedefault=y"
                alt="Retro adventure character" class="select-option-preview">
              <span class="select-option-text">Retro adventure character (d=pagan)</span>
            </div>
            <div class="select-option select-option-none {% if form.default_opt.value == 'none' %}selected{% endif %}"
              data-value="none">
              <span class="select-option-text">None</span>
            </div>
          </div>
        </div>

        <div class="button-group">
          <button type="submit" class="btn btn-primary">{% trans 'Check' %}</button>
        </div>
      </form>
    </div>
  </div>

  {% if mailurl or openidurl %}
  <div class="check-results-section" id="avatar-results">
    <h2>{% trans 'Avatar Preview Results' %}</h2>
    <p class="results-description">
      {% trans 'This is what the avatars will look like depending on the hash and protocol you use:' %}
    </p>

    <div class="hash-info">
      {% if mail_hash %}
      <div class="hash-display">
        <strong>MD5 hash (mail):</strong> <code>{{ mail_hash }}</code>
      </div>
      <div class="hash-display">
        <strong>SHA256 hash (mail):</strong> <code>{{ mail_hash256 }}</code>
      </div>
      {% endif %}
      {% if openid_hash %}
      <div class="hash-display">
        <strong>SHA256 hash (OpenID):</strong> <code>{{ openid_hash }}</code>
      </div>
      {% endif %}
    </div>

    <div class="avatar-results">
      {% if mailurl %}
      <div class="avatar-panel">
        <div class="panel-heading">
          <h3 class="panel-title">
            <span class="hash-type">MD5</span>
            <span class="connection-icons">
              <i class="fa-solid fa-lock" title="Secure connection (https)"></i>
              <i class="fa-solid fa-at" title="mail: {{ form.mail.value }}"></i>
            </span>
          </h3>
        </div>
        <div class="panel-body">
          <a href="{{ mailurl_secure }}" target="_blank">
            <img src="{{ mailurl_secure }}" class="avatar-image" alt="MD5 Avatar">
          </a>
        </div>
      </div>

      <div class="avatar-panel">
        <div class="panel-heading">
          <h3 class="panel-title">
            <span class="hash-type">SHA256</span>
            <span class="connection-icons">
              <i class="fa-solid fa-lock" title="Secure connection (https)"></i>
              <i class="fa-solid fa-at" title="mail: {{ form.mail.value }}"></i>
            </span>
          </h3>
        </div>
        <div class="panel-body">
          <a href="{{ mailurl_secure_256 }}" target="_blank">
            <img src="{{ mailurl_secure_256 }}" class="avatar-image" alt="SHA256 Avatar">
          </a>
        </div>
      </div>
      {% endif %}

      {% if openidurl %}
      <div class="avatar-panel">
        <div class="panel-heading">
          <h3 class="panel-title">
            <span class="hash-type">SHA256</span>
            <span class="connection-icons">
              <i class="fa-solid fa-lock" title="Secure connection (https)"></i>
              <i class="fa-solid fa-openid" title="openid: {{ form.openid.value }}"></i>
            </span>
          </h3>
        </div>
        <div class="panel-body">
          <a href="{{ openidurl_secure }}" target="_blank">
            <img src="{{ openidurl_secure }}" class="avatar-image" alt="OpenID Avatar">
          </a>
        </div>
      </div>
      {% endif %}
    </div>
  </div>
  {% else %}
  <div class="check-results-placeholder">
    <div class="placeholder-content">
      <h3>{% trans 'Avatar Preview' %}</h3>
      <p>{% trans 'Submit the form to see your avatar previews here.' %}</p>
      <div class="placeholder-icon">
        <i class="fa-solid fa-user-circle" style="font-size: 4rem; color: #ccc;"></i>
      </div>
    </div>
  </div>
  {% endif %}
</div>

{% if mailurl or openidurl %}
<script>
  // Auto-scroll to results on mobile after form submission
  document.addEventListener('DOMContentLoaded', function () {
    // Check if we're on mobile and have results
    if (window.innerWidth <= 768 && document.getElementById('avatar-results')) {
      // Small delay to ensure page is fully rendered
      setTimeout(function () {
        document.getElementById('avatar-results').scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        });
      }, 100);
    }
  });
</script>
{% endif %}

<script>
  // Custom select box functionality
  document.addEventListener('DOMContentLoaded', function () {
    const selectOptions = document.querySelectorAll('.select-option');
    const hiddenInput = document.getElementById('id_default_opt');

    selectOptions.forEach(function (option) {
      option.addEventListener('click', function () {
        // Remove selected class from all options
        selectOptions.forEach(function (opt) {
          opt.classList.remove('selected');
          opt.removeAttribute('data-selected');

          // Clear any inline styles that might interfere with CSS
          opt.style.backgroundColor = '';
          opt.style.borderColor = '';
          opt.style.color = '';
          opt.style.fontWeight = '';
          opt.style.transform = '';
          opt.style.boxShadow = '';

          const textElement = opt.querySelector('.select-option-text');
          if (textElement) {
            textElement.style.color = '';
            textElement.style.fontWeight = '';
          }
        });

        // Add selected class to clicked option
        this.classList.add('selected');
        this.setAttribute('data-selected', 'true');

        // Update hidden input value
        hiddenInput.value = this.getAttribute('data-value');

        // Force a reflow to ensure CSS is applied immediately
        this.offsetHeight;
      });
    });
  });
</script>

{% endblock content %}