<div
    x-show="showModal"
    x-cloak
    class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
>
    <div class="rounded-lg bg-white shadow-lg w_custom p_custom">
        <form @submit.prevent="submitForm">
            <!-- Título -->
            <div class="input_content_custom">
                <x-input-label :value="__('Titulo')" />
                <x-text-input type="text" class="mt-1 block w-full" x-model="title" />
            </div>

            <!-- Mensaje -->
            <div class="input_content_custom">
                <x-input-label :value="__('Mensaje')" />
                <x-text-input type="text" class="mt-1 block w-full" x-model="body" />
            </div>

            <div class="flex gap-4 mt-4">
                <button type="submit"
                    class="w-full justify-center rounded-md button_custom send_custom"
                    :disabled="isLoading"
                    x-bind:class="{ 'opacity-50 cursor-not-allowed': isLoading }">
                    <template x-if="isLoading">
                        <span class="loader mr-2"></span>
                    </template>
                    <span x-text="isLoading ? 'Enviando...' : 'Enviar'"></span>
                </button>

                <button type="button"
                    @click="showModal = false"
                    class="w-full justify-center rounded-md button_custom save_custom">
                    Cerrar
                </button>
            </div>
        </form>
    </div>
</div>

<style>
  /* APLICA SOLO PARA ELMODAL DE MENSAJE*/
  .w_custom{
    width: 25rem;
  }
  .p_custom{
    padding: 1rem;
  }
  .input_content_custom{
    margin-bottom: 0.8rem;
  }
  .button_custom{
    padding: .8rem;
  }
  .send_custom{
    color: #fff;
    background: #8e002d;
    border-color: #8e002d;
    border-width: 1px;
  }
  .save_custom{
      color: #8e002d;
      background: #fff;
      border-width: 1px;
      border-color: #8e002d;
  }
  .loader {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    animation: spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>
