<script lang="ts">
  import { onMount } from 'svelte';
  import { api } from '$lib/utils/api';
  import { toast } from '$lib/stores/toast';
  import { auth } from '$lib/stores/auth';
  import Modal from '$lib/components/Modal.svelte';

  // Estado
  let isLoading = false;
  let analysis = null;
  let analysisHours = 24;
  let selectedThreat = null;
  let showActionModal = false;
  let actionType = '';
  let actionTarget = '';
  let actionReason = '';
  let actionDuration = 60;

  // Usuario actual
  $: currentUser = $auth.user;
  $: canExecuteActions = currentUser && (currentUser.role === 'ADMIN' || currentUser.role === 'SUPPORT_MANAGER');

  /**
   * Cargar análisis de seguridad
   */
  async function loadSecurityAnalysis() {
    isLoading = true;
    try {
      analysis = await api.get('/audit/security/analysis', { hours: analysisHours });
      console.log('Security analysis loaded:', analysis);
    } catch (e: any) {
      toast.error('Error cargando análisis de seguridad: ' + (e.message || 'Error desconocido'));
    } finally {
      isLoading = false;
    }
  }

  /**
   * Cambiar período de análisis
   */
  function changeAnalysisPeriod(hours: number) {
    analysisHours = hours;
    loadSecurityAnalysis();
  }

  /**
   * Obtener color según nivel de riesgo
   */
  function getRiskColor(level: string) {
    const colors: any = {
      safe: 'bg-green-100 text-green-800 border-green-300',
      low: 'bg-blue-100 text-blue-800 border-blue-300',
      medium: 'bg-yellow-100 text-yellow-800 border-yellow-300',
      high: 'bg-orange-100 text-orange-800 border-orange-300',
      critical: 'bg-red-100 text-red-800 border-red-300'
    };
    return colors[level] || colors.low;
  }

  /**
   * Obtener color de severidad de amenaza
   */
  function getSeverityColor(severity: string) {
    const colors: any = {
      low: 'bg-blue-600 text-white',
      medium: 'bg-yellow-500 text-white',
      high: 'bg-orange-600 text-white',
      critical: 'bg-red-600 text-white'
    };
    return colors[severity] || colors.low;
  }

  /**
   * Obtener icono de tipo de amenaza
   */
  function getThreatIcon(type: string) {
    const icons: any = {
      brute_force_attack: 'M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z',
      privilege_escalation: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z',
      mass_deletion: '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',
      account_compromise: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z'
    };
    return icons[type] || icons.account_compromise;
  }

  /**
   * Obtener texto legible del tipo de amenaza
   */
  function getThreatTypeText(type: string) {
    const texts: any = {
      brute_force_attack: 'Ataque de Fuerza Bruta',
      privilege_escalation: 'Escalada de Privilegios',
      mass_deletion: 'Eliminación Masiva',
      account_compromise: 'Cuenta Comprometida'
    };
    return texts[type] || type;
  }

  /**
   * Abrir modal para acción de seguridad
   */
  function openActionModal(threat: any, action: string) {
    if (!canExecuteActions) {
      toast.error('No tienes permisos para ejecutar acciones de seguridad');
      return;
    }
    
    selectedThreat = threat;
    actionType = action;
    
    // Pre-llenar campos según el tipo de acción
    if (action === 'block_ip' && threat.affected_ips.length > 0) {
      actionTarget = threat.affected_ips[0];
      actionReason = `Bloqueo automático: ${threat.description}`;
    } else if (action === 'force_password_reset' && threat.affected_users.length > 0) {
      actionTarget = threat.affected_users[0];
      actionReason = `Reseteo de seguridad: ${threat.description}`;
    } else {
      actionTarget = '';
      actionReason = threat.description;
    }
    
    showActionModal = true;
  }

  /**
   * Ejecutar acción de seguridad
   */
  async function executeSecurityAction() {
    if (!actionTarget || !actionReason) {
      toast.error('Completa todos los campos requeridos');
      return;
    }

    try {
      const response = await api.post('/audit/security/action', {
        action_type: actionType,
        target: actionTarget,
        reason: actionReason,
        duration_minutes: actionDuration
      });

      if (response.success) {
        toast.success(response.message);
        showActionModal = false;
        loadSecurityAnalysis(); // Recargar análisis
      } else {
        toast.error(response.message);
      }
    } catch (e: any) {
      toast.error('Error ejecutando acción: ' + (e.message || 'Error desconocido'));
    }
  }

  /**
   * Formatear fecha
   */
  function formatDate(dateString: string) {
    const date = new Date(dateString);
    return new Intl.DateTimeFormat('es-MX', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
      timeZone: 'UTC',
      timeZoneName: 'short'
    }).format(date);
  }

  onMount(() => {
    loadSecurityAnalysis();
  });
</script>

<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
  <!-- Header -->
  <div class="mb-6">
    <div class="flex items-center justify-between">
      <div>
        <h1 class="text-2xl font-bold text-gray-900 flex items-center gap-2">
          <svg class="w-8 h-8 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
          </svg>
          Análisis de Seguridad
        </h1>
        <p class="mt-1 text-sm text-gray-500">
          Detección de amenazas y análisis de vulnerabilidades
        </p>
      </div>
      <button
        on:click={() => loadSecurityAnalysis()}
        class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 flex items-center gap-2"
      >
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
        </svg>
        Actualizar
      </button>
    </div>
  </div>

  <!-- Selector de Período -->
  <div class="bg-white shadow rounded-lg p-4 mb-6">
    <div class="flex items-center gap-2 mb-2">
      <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <span class="text-sm font-medium text-gray-700">Período de Análisis</span>
    </div>
    <div class="flex flex-wrap gap-2">
      <button
        on:click={() => changeAnalysisPeriod(24)}
        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {analysisHours === 24 ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-indigo-50'}"
      >
        Últimas 24 horas
      </button>
      <button
        on:click={() => changeAnalysisPeriod(48)}
        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {analysisHours === 48 ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-indigo-50'}"
      >
        Últimas 48 horas
      </button>
      <button
        on:click={() => changeAnalysisPeriod(168)}
        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {analysisHours === 168 ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-indigo-50'}"
      >
        Última semana
      </button>
    </div>
  </div>

  {#if isLoading}
    <div class="flex justify-center items-center py-12">
      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-600"></div>
    </div>
  {:else if analysis}
    <!-- Resumen de Riesgo -->
    <div class="bg-white shadow rounded-lg p-6 mb-6 border-l-4 {getRiskColor(analysis.overall_risk_level)}">
      <div class="flex items-center justify-between">
        <div>
          <h3 class="text-lg font-semibold text-gray-900">Nivel de Riesgo General</h3>
          <p class="text-sm text-gray-600 mt-1">Análisis de {analysis.analysis_period_hours} horas</p>
        </div>
        <div class="text-right">
          <span class="inline-block px-4 py-2 text-2xl font-bold rounded-lg {getRiskColor(analysis.overall_risk_level)}">
            {analysis.overall_risk_level.toUpperCase()}
          </span>
          <p class="text-xs text-gray-500 mt-1">Generado: {formatDate(analysis.generated_at)}</p>
        </div>
      </div>
    </div>

    <!-- Estadísticas Rápidas -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
      <div class="bg-white rounded-lg shadow p-4">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-gray-500">Amenazas Detectadas</p>
            <p class="text-2xl font-bold text-gray-800">{analysis.total_threats_detected}</p>
          </div>
          <svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
          </svg>
        </div>
      </div>

      <div class="bg-white rounded-lg shadow p-4">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-gray-500">Intentos Fallidos</p>
            <p class="text-2xl font-bold text-gray-700">{analysis.failed_login_attempts}</p>
          </div>
          <svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
          </svg>
        </div>
      </div>

      <div class="bg-white rounded-lg shadow p-4">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-gray-500">IPs Sospechosas</p>
            <p class="text-2xl font-bold text-gray-700">{analysis.suspicious_ips_count}</p>
          </div>
          <svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
          </svg>
        </div>
      </div>

      <div class="bg-white rounded-lg shadow p-4">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-gray-500">Acciones Críticas</p>
            <p class="text-2xl font-bold text-gray-700">{analysis.critical_actions_count}</p>
          </div>
          <svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
          </svg>
        </div>
      </div>
    </div>

    <!-- Recomendaciones Generales -->
    {#if analysis.recommended_actions && analysis.recommended_actions.length > 0}
      <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 mb-6">
        <div class="flex items-start gap-3">
          <svg class="w-6 h-6 text-gray-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <div class="flex-1">
            <h4 class="text-sm font-semibold text-gray-900 mb-2">Acciones Recomendadas</h4>
            <ul class="space-y-1">
              {#each analysis.recommended_actions as action}
                <li class="text-sm text-gray-700 flex items-start gap-2">
                  <svg class="w-4 h-4 text-gray-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                  </svg>
                  {action}
                </li>
              {/each}
            </ul>
          </div>
        </div>
      </div>
    {/if}

    <!-- Lista de Amenazas -->
    {#if analysis.threats && analysis.threats.length > 0}
      <div class="space-y-4">
        <h3 class="text-lg font-semibold text-gray-900">Amenazas Detectadas</h3>
        
        {#each analysis.threats as threat}
          <div class="bg-white shadow rounded-lg p-6 border-l-4 {threat.severity === 'critical' ? 'border-gray-900' : threat.severity === 'high' ? 'border-gray-600' : threat.severity === 'medium' ? 'border-gray-400' : 'border-gray-200'}">
            <!-- Header de Amenaza -->
            <div class="flex items-start justify-between mb-4">
              <div class="flex items-start gap-3 flex-1">
                <div class="p-2 rounded-lg {threat.severity === 'critical' ? 'bg-gray-100' : threat.severity === 'high' ? 'bg-gray-100' : threat.severity === 'medium' ? 'bg-gray-100' : 'bg-gray-50'}">
                  <svg class="w-6 h-6 {threat.severity === 'critical' ? 'text-gray-900' : threat.severity === 'high' ? 'text-gray-700' : threat.severity === 'medium' ? 'text-gray-600' : 'text-gray-500'}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={getThreatIcon(threat.type)} />
                  </svg>
                </div>
                <div class="flex-1">
                  <div class="flex items-center gap-2 mb-1">
                    <h4 class="text-lg font-semibold text-gray-900">{getThreatTypeText(threat.type)}</h4>
                    <span class="px-2 py-1 text-xs font-semibold rounded-full {getSeverityColor(threat.severity)}">
                      {threat.severity.toUpperCase()}
                    </span>
                  </div>
                  <p class="text-sm text-gray-700">{threat.description}</p>
                </div>
              </div>
            </div>

            <!-- Detalles -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4 text-sm">
              <div>
                <span class="font-medium text-gray-600">Ocurrencias:</span>
                <span class="ml-2 text-gray-900 font-semibold">{threat.occurrences}</span>
              </div>
              <div>
                <span class="font-medium text-gray-600">Primera detección:</span>
                <span class="ml-2 text-gray-900">{formatDate(threat.first_seen)}</span>
              </div>
              <div>
                <span class="font-medium text-gray-600">Última detección:</span>
                <span class="ml-2 text-gray-900">{formatDate(threat.last_seen)}</span>
              </div>
            </div>

            <!-- IPs y Usuarios Afectados -->
            {#if threat.affected_ips.length > 0 || threat.affected_users.length > 0}
              <div class="mb-4 text-sm">
                {#if threat.affected_ips.length > 0}
                  <div class="mb-2">
                    <span class="font-medium text-gray-600">IPs involucradas:</span>
                    <div class="mt-1 flex flex-wrap gap-1">
                      {#each threat.affected_ips as ip}
                        <code class="px-2 py-1 bg-gray-100 rounded text-xs font-mono">{ip}</code>
                      {/each}
                    </div>
                  </div>
                {/if}
                {#if threat.affected_users.length > 0}
                  <div>
                    <span class="font-medium text-gray-600">Usuarios afectados:</span>
                    <div class="mt-1 flex flex-wrap gap-1">
                      {#each threat.affected_users as user}
                        <span class="px-2 py-1 bg-gray-100 rounded text-xs">{user}</span>
                      {/each}
                    </div>
                  </div>
                {/if}
              </div>
            {/if}

            <!-- Recomendaciones -->
            {#if threat.recommendations && threat.recommendations.length > 0}
              <div class="bg-gray-50 rounded-lg p-3 mb-4">
                <p class="text-xs font-semibold text-gray-700 mb-2">Recomendaciones:</p>
                <ul class="space-y-1">
                  {#each threat.recommendations as rec}
                    <li class="text-xs text-gray-600 flex items-start gap-2">
                      <svg class="w-3 h-3 text-gray-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                      </svg>
                      {rec}
                    </li>
                  {/each}
                </ul>
              </div>
            {/if}

            <!-- Acciones -->
            {#if canExecuteActions}
              <div class="flex flex-wrap gap-2">
                {#if threat.affected_ips.length > 0}
                  <button
                    on:click={() => openActionModal(threat, 'block_ip')}
                    class="px-3 py-1.5 bg-red-600 text-white text-sm rounded hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 flex items-center gap-1"
                  >
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
                    </svg>
                    Bloquear IP
                  </button>
                {/if}
                {#if threat.affected_users.length > 0}
                  <button
                    on:click={() => openActionModal(threat, 'force_password_reset')}
                    class="px-3 py-1.5 bg-orange-600 text-white text-sm rounded hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 flex items-center gap-1"
                  >
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
                    </svg>
                    Resetear Contraseña
                  </button>
                {/if}
                <button
                  on:click={() => openActionModal(threat, 'notify_admin')}
                  class="px-3 py-1.5 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-1"
                >
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                  </svg>
                  Notificar Admin
                </button>
              </div>
            {/if}
          </div>
        {/each}
      </div>
    {:else}
      <!-- No hay amenazas -->
      <div class="bg-gray-50 border border-gray-200 rounded-lg p-8 text-center">
        <svg class="w-16 h-16 text-gray-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
        </svg>
        <h3 class="text-lg font-semibold text-gray-900 mb-2">Sistema Seguro</h3>
        <p class="text-sm text-gray-600">No se detectaron amenazas en el período analizado</p>
      </div>
    {/if}
  {/if}
</div>

<!-- Modal de Acción de Seguridad -->
{#if showActionModal}
  <Modal open={showActionModal} size="lg" title="Ejecutar Acción de Seguridad" on:close={() => showActionModal = false}>
    <div class="space-y-4">
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de Acción</label>
        <input
          type="text"
          bind:value={actionType}
          readonly
          class="block w-full rounded-md border-gray-300 bg-gray-50 shadow-sm sm:text-sm"
        />
      </div>

      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">
          Objetivo {#if actionType === 'block_ip'}(IP){:else if actionType === 'force_password_reset'}(Email){/if}
        </label>
        <input
          type="text"
          bind:value={actionTarget}
          placeholder="IP o email del usuario"
          class="block w-full rounded-md border-gray-300 shadow-sm focus:border-gray-500 focus:ring-gray-500 sm:text-sm"
        />
      </div>

      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Razón</label>
        <textarea
          bind:value={actionReason}
          rows="3"
          placeholder="Razón de la acción de seguridad"
          class="block w-full rounded-md border-gray-300 shadow-sm focus:border-gray-500 focus:ring-gray-500 sm:text-sm"
        ></textarea>
      </div>

      {#if actionType === 'block_ip'}
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Duración del Bloqueo (minutos)</label>
          <input
            type="number"
            bind:value={actionDuration}
            min="1"
            max="10080"
            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-gray-500 focus:ring-gray-500 sm:text-sm"
          />
        </div>
      {/if}

      <div class="flex justify-end gap-3 pt-4 border-t">
        <button
          on:click={() => showActionModal = false}
          class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500"
        >
          Cancelar
        </button>
        <button
          on:click={executeSecurityAction}
          class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"
        >
          Ejecutar Acción
        </button>
      </div>
    </div>
  </Modal>
{/if}
