{% extends "base.html" %}
{% load static %}
{% load tailwind_forms %}
{% load i18n %}

{% block title %}{% translate "Settings" %} · {{ project.name }} · {{ site_title }}{% endblock %}

{% block content %}

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="hidden fixed inset-0 bg-slate-600/50 dark:bg-slate-900/50 overflow-y-auto h-full w-full z-50 flex items-center justify-center">
    <div class="relative p-6 border border-slate-300 dark:border-slate-600 w-96 shadow-lg rounded-md bg-white dark:bg-slate-900">
        <div class="text-center m-4">
            <h3 class="text-2xl font-semibold text-slate-800 dark:text-slate-100 mt-3 mb-4">{% translate "Delete Project" %}</h3>
            <div class="mt-4 mb-6">
                <p class="text-slate-700 dark:text-slate-300">
                    {% translate "Are you sure you want to delete this project? This action cannot be undone and will delete all associated data." %}
                </p>
            </div>
            <div class="flex items-center justify-center space-x-4 mb-4">
                <button id="cancelDelete" class="text-cyan-500 dark:text-cyan-300 font-bold">{% translate "Cancel" %}</button>
                <form method="post" action="." id="deleteForm">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="delete">
                    <button type="submit" class="font-bold py-2 px-4 rounded-sm bg-red-500 dark:bg-red-700 text-white border-2 border-red-600 dark:border-red-400 hover:bg-red-600 dark:hover:bg-red-800 active:ring-3">Confirm</button>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="flex items-center justify-center">
    <div class="m-4 max-w-4xl flex-auto">
        <form action="." method="post" id="projectForm">
        {% csrf_token %}

        <div>
            <h1 class="text-4xl my-4 font-bold">{% translate "Settings" %} · {{ project.name }}</h1>
        </div>

        <div class="mt-4 mb-4">
            {% blocktranslate with project_name=project.name %}Project settings for "{{ project_name }}".{% endblocktranslate %}
        </div>

        {% tailwind_formfield form.name %}
        {% tailwind_formfield form.slug %}
        {% tailwind_formfield form.visibility %}
        {% tailwind_formfield form.retention_max_event_count %}

        <div class="js-copy-container">
            <div class="flex items-start gap-2">
                <span class="js-copy-source hidden">{{ form.dsn.value }}</span>
                <div class="flex-1 min-w-0">{% tailwind_formfield form.dsn %}</div>
                <div class="mt-8">
                    {% include "includes/copy_button_only.html" with secondary=True %}
                </div>
            </div>
        </div>
        {% tailwind_formfield form.grouping_mechanism %}

        <div class="flex items-center mt-4">
            <button name="action" value="invite" class="font-bold text-slate-800 dark:text-slate-100 border-slate-500 dark:border-slate-400 pl-4 pr-4 pb-2 pt-2 border-2 bg-cyan-200 dark:bg-cyan-700 hover:bg-cyan-400 dark:hover:bg-cyan-600 active:ring-3 rounded-md">{% translate "Save" %}</button>
            <a href="{% url "project_list" %}" class="text-cyan-500 dark:text-cyan-300 font-bold ml-2">{% translate "Cancel" %}</a>
            <button type="button" id="deleteButton" class="font-bold py-2 px-4 rounded-sm bg-red-500 dark:bg-red-700 text-white border-2 border-red-600 dark:border-red-400 hover:bg-red-600 dark:hover:bg-red-800 active:ring-3 ml-4 ml-auto">{% translate "Delete Project" %}</button>
        </div>
        </form>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
    var csrftoken = '{{ csrf_token }}';
</script>
<script src="{% static 'js/entity_edit.js' %}"></script>
<script src="{% static 'js/copy.js' %}"></script>
{% endblock %}