{% extends 'base.html' %}
{% load static %}
{% block title %}تسجيل الدخول{% endblock %}

{% block content %}
<link rel="stylesheet" href="{% static 'css/login.css' %}">

<div class="page">
    <div class="container d-flex">
      <div class="right p-2 d-felx align-content-center">
        <div class="">
          <img src="{% static 'img/pdf_logo.webp' %}" alt="Ministry Logo" class="img-fluid mx-auto d-block "style="width: 75%;">
      </div>
      {% comment %} <div class="login mb-3 text-secondary">تسجيل الدخــول</div> {% endcomment %}
    </div>
      <div class="left">
        <svg viewBox="0 0 320 300">
          <defs>
            <linearGradient
                            inkscape:collect="always"
                            id="linearGradient"
                            x1="13"
                            y1="193.49992"
                            x2="307"
                            y2="193.49992"
                            gradientUnits="userSpaceOnUse">
              <stop
                    style="stop-color:#c9aa5e;"
                    offset="0"
                    id="stop876" />
              <stop
                    style="stop-color:#cb9447;"
                    offset="1"
                    id="stop878" />
            </linearGradient>
          </defs>
          <path d="m 40,120.00016 239.99984,-3.2e-4 c 0,0 24.99263,0.79932 25.00016,35.00016 0.008,34.20084 -25.00016,35 -25.00016,35 h -239.99984 c 0,-0.0205 -25,4.01348 -25,38.5 0,34.48652 25,38.5 25,38.5 h 215 c 0,0 20,-0.99604 20,-25 0,-24.00396 -20,-25 -20,-25 h -190 c 0,0 -20,1.71033 -20,25 0,24.00396 20,25 20,25 h 168.57143" />
        </svg>
        <form action="{% url 'login' %}" method="POST">
            {% csrf_token %}
            <div class="form">
                <input type="text" style="font-size: 28px;" id="username" name="username" autofocus placeholder="اسم المستخدم" required>
        
                <input type="password" style="font-size: 28px;" id="password" name="password" placeholder="كلمة المرور" required>
        
                <input type="submit" style="font-size: 25px;" class="mt-5 pe-3" value="دخول" id="submit">
            </div>
        </form>
      </div>
    </div>
  </div>

<script nonce="{{ request.csp_nonce }}">
    var current = null;
    document.querySelector('#username').addEventListener('focus', function(e) {
      if (current) current.pause();
      current = anime({
        targets: 'path',
        strokeDashoffset: {
          value: 0,
          duration: 700,
          easing: 'easeOutQuart'
        },
        strokeDasharray: {
          value: '240 1386',
          duration: 700,
          easing: 'easeOutQuart'
        }
      });
    });
    document.querySelector('#password').addEventListener('focus', function(e) {
      if (current) current.pause();
      current = anime({
        targets: 'path',
        strokeDashoffset: {
          value: -336,
          duration: 700,
          easing: 'easeOutQuart'
        },
        strokeDasharray: {
          value: '240 1386',
          duration: 700,
          easing: 'easeOutQuart'
        }
      });
    });
    document.querySelector('#submit').addEventListener('focus', function(e) {
      if (current) current.pause();
      current = anime({
        targets: 'path',
        strokeDashoffset: {
          value: -730,
          duration: 700,
          easing: 'easeOutQuart'
        },
        strokeDasharray: {
          value: '530 1386',
          duration: 700,
          easing: 'easeOutQuart'
        }
      });
    });

      // New script: Hide the login button in the title bar if present.
      document.addEventListener("DOMContentLoaded", function() {
        // Adjust the selector to match the login button in your title bar.
        var loginTitleButton = document.querySelector(".login-title-btn");
        if (loginTitleButton) {
            loginTitleButton.style.display = "none";
        }
    });
</script>

<script src="{% static 'js/anime.min.js' %}"></script>
{% endblock %}