{% extends 'dashboard/base.html.twig' %}

{% block title %}{{ action|capitalize }} Server | TextBlast AI{% endblock %}

{% block main %}
<div class="max-w-3xl mx-auto animate-in fade-in zoom-in-95 duration-500">
    <div class="mb-8">
        <div class="flex items-center space-x-2 text-xs uppercase tracking-widest text-emerald-400 font-bold mb-2">
            <a href="{{ path('server_index') }}" class="hover:text-white transition-colors">Servers</a>
            <span>/</span>
            <span class="text-slate-500">Form</span>
        </div>
        <h1 class="text-4xl font-black text-white tracking-tighter">
            {{ action == 'u' ? 'Edit Server' : 'New Server' }}
        </h1>
    </div>

    <div class="relative group">
        <div class="absolute -inset-1 bg-gradient-to-r from-emerald-500/20 to-blue-500/20 rounded-[2rem] blur-2xl opacity-50"></div>
        
        <div class="relative bg-slate-900/60 backdrop-blur-2xl border border-white/10 rounded-[2rem] p-8 md:p-12 shadow-2xl">
            
            {{ form_start(serverForm, {'attr': {'class': 'space-y-8'}}) }}
                
                {% if not serverForm.vars.valid %}
                    <div class="bg-rose-500/10 border border-rose-500/20 rounded-2xl p-4 mb-6">
                        <div class="flex items-center space-x-3 text-rose-400">
                            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            <span class="text-sm font-medium">Please correct the highlighted errors below.</span>
                        </div>
                        {{ form_errors(serverForm) }}
                    </div>
                {% endif %}

                <div class="grid grid-cols-1  gap-6">
                    <div class="space-y-2">
                        <label class="block text-xs font-bold text-emerald-400 uppercase tracking-[0.2em] ml-1">Code</label>
                        {{ form_widget(serverForm.code, {'attr': {'placeholder': 'Server 1', 'class': 'w-full bg-slate-950/50 border border-white/10 rounded-xl px-5 py-4 text-white focus:ring-2 focus:ring-emerald-500/50 outline-none transition-all placeholder:text-slate-600'}}) }}
                        <div class="text-rose-400 text-xs mt-1">{{ form_errors(serverForm.code) }}</div>
                    </div>
                </div>
                 <div class="grid grid-cols-1  gap-6">
                  
                    <div class="space-y-2">
                        <label class="block text-xs font-bold text-emerald-400 uppercase tracking-[0.2em] ml-1">Description</label>
                        {{ form_widget(serverForm.description, {'attr': {'placeholder': 'https://server1.textblast.com', 'class': 'w-full bg-slate-950/50 border border-white/10 rounded-xl px-5 py-4 text-white focus:ring-2 focus:ring-emerald-500/50 outline-none transition-all placeholder:text-slate-600'}}) }}
                        <div class="text-rose-400 text-xs mt-1">{{ form_errors(serverForm.description) }}</div>
                    </div>
                    <div>
                          <label class="relative inline-flex items-center cursor-pointer">
                            {{ form_widget(serverForm.isActive, { 'attr': {'class': 'sr-only peer'} }) }}
                            <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-emerald-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-500"></div>
                            <span class="ml-3 text-sm font-medium text-slate-400 peer-checked:text-emerald-400">
                               Active
                            </span>
                        </label>
                    </div>
                </div>
          

                <div class="flex items-center justify-end space-x-6 pt-6">
                   <div>
                        {% if action == 'u' %}
                            <button type="button" 
                                    onclick="submitAsDelete()"
                                    class="flex items-center text-rose-500/70 hover:text-rose-400 font-bold text-xs uppercase tracking-widest transition-colors group">
                                <svg class="w-4 h-4 mr-2 group-hover:shake" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                </svg>
                                Delete Account
                            </button>
                        {% endif %}
                    </div>
                    <a href="{{ path('server_index') }}" class="text-slate-400 hover:text-white font-bold text-sm transition-colors tracking-wide">
                        Discard Changes
                    </a>
                    
                    <button type="submit" class="relative group/btn overflow-hidden rounded-2xl">
                        <div class="absolute inset-0 bg-gradient-to-r from-emerald-500 to-emerald-700 transition-all group-hover/btn:scale-105"></div>
                        <span class="relative flex items-center px-10 py-4 text-white font-black uppercase tracking-widest text-xs">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                            Confirm & Save
                        </span>
                    </button>
                </div>

            {{ form_end(serverForm) }}
        </div>
    </div>
</div>

<style>
    select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2334d399' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 1rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem;
    }

      .group:hover .group-hover\:shake {
        animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
    }

    @keyframes shake {
        10%, 90% { transform: translate3d(-1px, 0, 0); }
        20%, 80% { transform: translate3d(2px, 0, 0); }
        30%, 50%, 70% { transform: translate3d(-2px, 0, 0); }
        40%, 60% { transform: translate3d(2px, 0, 0); }
    }
</style>

<script>
  function submitAsDelete() {
    if (confirm("Are you sure you want to delete this server?")) {
        const form = document.querySelector('form[name="server_form"]'); 
        
        let currentUrl = window.location.pathname;
        let deleteUrl = currentUrl.replace('/u/', '/d/');
        
        form.action = deleteUrl;
        form.submit();
    }
}
</script>
{% endblock %}