{% extends "base.html" %}
{% load static %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
    <form method="post"
          id="delete-form"
          class="flex flex-col items-center justify-center space-y-4 my-auto">
        <p class="font-bold">To confirm, type "{{ project.owner.username }}/{{ project.name }}" in the box below</p>
        {% csrf_token %}
        <input type="text"
               id="confirm-input"
               class="text-center form-field border-slategray-200 hover:border-lightcoral bg-gray-300 focus:border-indianred-100 transition ease-linear" />
        <button id="submit-button"
                class="button submit-button-disabled text-lightsteelblue-100 bg-slategray-200 uppercase font-bold"
                type="submit">Delete</button>
    </form>
    <script type="text/javascript">
        var confirm_string = "{{ project.owner.username }}/{{ project.name }}"
        const USER_INPUT = document.getElementById("confirm-input")
        const SUBMIT_BUTTON = document.getElementById("submit-button")
        SUBMIT_BUTTON.disabled = true

        USER_INPUT.addEventListener("input", () => {
            if (confirm_string == USER_INPUT.value) {
                SUBMIT_BUTTON.classList.remove(
                    "submit-button-disabled",
                    "text-lightsteelblue-100",
                    "bg-slategray-200"
                )
                SUBMIT_BUTTON.classList.add(
                    "submit-button-enabled",
                    "text-gray-500",
                    "bg-indianred-100",
                )
                SUBMIT_BUTTON.disabled = false
            } else {
                SUBMIT_BUTTON.classList.remove(
                    "submit-button-enabled",
                    "text-gray-500",
                    "bg-indianred-100",
                )
                SUBMIT_BUTTON.classList.add(
                    "submit-button-disabled",
                    "text-lightsteelblue-100",
                    "bg-slategray-200"
                )
                SUBMIT_BUTTON.disabled = true
            }
        })
    </script>
{% endblock %}