service-finder/frontend_admin/pages/providers/[id].vue

<template>
  <div>
    <!-- Back Button & Header -->
    <div class="mb-8">
      <button
        @click="goBack"
        class="inline-flex items-center gap-1.5 text-sm text-slate-400 hover:text-white transition mb-4"
      >
        <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 19l-7-7 7-7" />
        </svg>
        Vissza a szolgáltatókhoz
      </button>
      <h1 class="text-2xl font-bold text-white">Szolgáltató részletek</h1>
      <p class="text-slate-400 mt-1">Szolgáltató #{{ $route.params.id }}</p>
    </div>

    <!-- Loading State -->
    <div v-if="loading" class="flex items-center justify-center py-20">
      <div class="text-slate-400 flex items-center gap-3">
        <svg class="w-5 h-5 animate-spin" 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>
        <span>Szolgáltató betöltése...</span>
      </div>
    </div>

    <!-- Error State -->
    <div v-else-if="error" class="bg-rose-500/10 border border-rose-500/30 rounded-xl p-6 mb-8">
      <p class="text-rose-400">Hiba történt a szolgáltató betöltése közben.</p>
      <button @click="fetchProvider" class="mt-3 text-sm text-rose-300 hover:text-rose-200 underline">Újrapróbálkozás</button>
    </div>

    <!-- Not Found -->
    <div v-else-if="!provider" class="bg-slate-800 rounded-xl border border-slate-700 p-6">
      <p class="text-slate-400 text-center py-12">A szolgáltató nem található.</p>
    </div>

    <template v-else>
      <!-- Status Banner -->
      <div
        class="rounded-xl border p-4 mb-6 flex items-center gap-3"
        :class="statusBannerClass"
      >
        <span class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center" :class="statusIconClass">
          <svg v-if="provider.status === 'approved'" 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="M5 13l4 4L19 7" />
          </svg>
          <svg v-else-if="provider.status === 'pending'" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <svg v-else 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="M6 18L18 6M6 6l12 12" />
          </svg>
        </span>
        <div>
          <p class="text-sm font-medium" :class="statusTextClass">{{ statusLabel(provider.status) }}</p>
          <p class="text-xs mt-0.5" :class="statusSubtextClass">{{ statusDescription(provider.status) }}</p>
        </div>
      </div>

      <!-- Main Content Grid -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Left Column: Basic Info -->
        <div class="lg:col-span-2 space-y-6">
          <!-- Basic Information -->
          <div class="bg-slate-800 rounded-xl border border-slate-700 p-6">
            <h2 class="text-lg font-semibold text-white mb-4">Alapadatok</h2>
            <dl class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <dt class="text-xs text-slate-500 uppercase tracking-wider">Név</dt>
                <dd class="text-sm text-white mt-1 font-medium">{{ provider.name }}</dd>
              </div>
              <div>
                <dt class="text-xs text-slate-500 uppercase tracking-wider">Kategória</dt>
                <dd class="text-sm text-white mt-1">{{ provider.category || '—' }}</dd>
              </div>
              <div>
                <dt class="text-xs text-slate-500 uppercase tracking-wider">Forrás</dt>
                <dd class="mt-1">
                  <code class="text-sm font-mono text-amber-300 bg-amber-500/10 px-2 py-0.5 rounded">{{ provider.source }}</code>
                </dd>
              </div>
              <div>
                <dt class="text-xs text-slate-500 uppercase tracking-wider">Validációs pontszám</dt>
                <dd class="mt-1">
                  <div class="flex items-center gap-2">
                    <div class="w-24 h-2 bg-slate-700 rounded-full overflow-hidden">
                      <div
                        class="h-full rounded-full transition-all"
                        :class="provider.validation_score >= 50 ? 'bg-emerald-500' : provider.validation_score >= 20 ? 'bg-amber-500' : 'bg-slate-500'"
                        :style="{ width: Math.min(provider.validation_score, 100) + '%' }"
                      />
                    </div>
                    <span class="text-sm text-white font-medium">{{ provider.validation_score }}</span>
                  </div>
                </dd>
              </div>
              <div>
                <dt class="text-xs text-slate-500 uppercase tracking-wider">Létrehozva</dt>
                <dd class="text-sm text-white mt-1">{{ formatDate(provider.created_at) }}</dd>
              </div>
              <div>
                <dt class="text-xs text-slate-500 uppercase tracking-wider">Beküldő user ID</dt>
                <dd class="text-sm text-white mt-1">{{ provider.added_by_user_id || '—' }}</dd>
              </div>
            </dl>
          </div>

          <!-- Address Information -->
          <div class="bg-slate-800 rounded-xl border border-slate-700 p-6">
            <h2 class="text-lg font-semibold text-white mb-4">Cím adatok</h2>
            <dl class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div class="md:col-span-2">
                <dt class="text-xs text-slate-500 uppercase tracking-wider">Teljes cím</dt>
                <dd class="text-sm text-white mt-1">{{ provider.address || '—' }}</dd>
              </div>
              <div>
                <dt class="text-xs text-slate-500 uppercase tracking-wider">Város</dt>
                <dd class="text-sm text-white mt-1">{{ provider.city || '—' }}</dd>
              </div>
              <div>
                <dt class="text-xs text-slate-500 uppercase tracking-wider">Irányítószám</dt>
                <dd class="text-sm text-white mt-1">{{ provider.address_zip || '—' }}</dd>
              </div>
              <div>
                <dt class="text-xs text-slate-500 uppercase tracking-wider">Utca</dt>
                <dd class="text-sm text-white mt-1">{{ provider.address_street_name || '—' }}</dd>
              </div>
              <div>
                <dt class="text-xs text-slate-500 uppercase tracking-wider">Házszám</dt>
                <dd class="text-sm text-white mt-1">{{ provider.address_house_number || '—' }}</dd>
              </div>
              <div>
                <dt class="text-xs text-slate-500 uppercase tracking-wider">Plus Code</dt>
                <dd class="text-sm text-white mt-1">{{ provider.plus_code || '—' }}</dd>
              </div>
            </dl>
          </div>

          <!-- Contact Information -->
          <div class="bg-slate-800 rounded-xl border border-slate-700 p-6">
            <h2 class="text-lg font-semibold text-white mb-4">Elérhetőség</h2>
            <dl class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <dt class="text-xs text-slate-500 uppercase tracking-wider">Telefon</dt>
                <dd class="text-sm text-white mt-1">{{ provider.contact_phone || '—' }}</dd>
              </div>
              <div>
                <dt class="text-xs text-slate-500 uppercase tracking-wider">Email</dt>
                <dd class="text-sm text-white mt-1">{{ provider.contact_email || '—' }}</dd>
              </div>
              <div>
                <dt class="text-xs text-slate-500 uppercase tracking-wider">Weboldal</dt>
                <dd class="text-sm text-white mt-1">
                  <a v-if="provider.website" :href="provider.website" target="_blank" class="text-indigo-400 hover:text-indigo-300 underline">
                    {{ provider.website }}
                  </a>
                  <span v-else>—</span>
                </dd>
              </div>
            </dl>
          </div>
        </div>

        <!-- Right Column: Actions -->
        <div class="space-y-4">
          <!-- Moderation Actions -->
          <div class="bg-slate-800 rounded-xl border border-slate-700 p-6">
            <h2 class="text-lg font-semibold text-white mb-4">Moderációs műveletek</h2>

            <!-- Pending Actions -->
            <div v-if="provider.status === 'pending'" class="space-y-3">
              <button
                @click="approveProvider"
                :disabled="actionLoading"
                class="w-full px-4 py-3 bg-emerald-600 hover:bg-emerald-500 disabled:bg-emerald-600/50 text-white rounded-lg text-sm font-medium transition flex items-center justify-center gap-2"
              >
                <svg v-if="actionLoading" class="w-4 h-4 animate-spin" 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>
                <svg v-else 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="M5 13l4 4L19 7" />
                </svg>
                Jóváhagyás
              </button>
              <button
                @click="openRejectModal"
                :disabled="actionLoading"
                class="w-full px-4 py-3 bg-rose-600/20 hover:bg-rose-600/40 disabled:opacity-50 text-rose-400 rounded-lg text-sm font-medium transition flex items-center justify-center gap-2"
              >
                <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="M6 18L18 6M6 6l12 12" />
                </svg>
                Elutasítás
              </button>
            </div>

            <!-- Approved Actions -->
            <div v-else-if="provider.status === 'approved'" class="space-y-3">
              <button
                @click="openFlagModal"
                :disabled="actionLoading"
                class="w-full px-4 py-3 bg-purple-600/20 hover:bg-purple-600/40 disabled:opacity-50 text-purple-400 rounded-lg text-sm font-medium transition flex items-center justify-center gap-2"
              >
                <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="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
                </svg>
                Megjelölés (Flag)
              </button>
              <button
                @click="deleteProvider"
                :disabled="actionLoading"
                class="w-full px-4 py-3 bg-rose-600/20 hover:bg-rose-600/40 disabled:opacity-50 text-rose-400 rounded-lg text-sm font-medium transition flex items-center justify-center gap-2"
              >
                <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="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>
                Törlés (Soft Delete)
              </button>
            </div>

            <!-- Rejected / Flagged Info -->
            <div v-else class="text-sm text-slate-400 text-center py-4">
              <p>A szolgáltató {{ provider.status === 'rejected' ? 'elutasításra' : 'megjelölésre' }} került.</p>
              <button
                @click="deleteProvider"
                :disabled="actionLoading"
                class="mt-3 w-full px-4 py-3 bg-rose-600/20 hover:bg-rose-600/40 disabled:opacity-50 text-rose-400 rounded-lg text-sm font-medium transition flex items-center justify-center gap-2"
              >
                <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="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>
                Törlés
              </button>
            </div>
          </div>

          <!-- Evidence Image -->
          <div v-if="provider.evidence_image_path" class="bg-slate-800 rounded-xl border border-slate-700 p-6">
            <h2 class="text-lg font-semibold text-white mb-4">Bizonyíték kép</h2>
            <img
              :src="provider.evidence_image_path"
              alt="Evidence"
              class="w-full rounded-lg border border-slate-600"
            />
          </div>
        </div>
      </div>
    </template>

    <!-- Reject Modal -->
    <div v-if="showRejectModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showRejectModal = false">
      <div class="bg-slate-800 rounded-xl border border-slate-700 p-6 w-full max-w-lg mx-4 shadow-2xl">
        <h2 class="text-lg font-semibold text-white mb-2">Szolgáltató elutasítása</h2>
        <p class="text-sm text-slate-400 mb-6">
          Biztosan elutasítod a(z) <strong class="text-white">{{ provider?.name }}</strong> szolgáltatót?
        </p>
        <form @submit.prevent="rejectProvider">
          <div class="mb-4">
            <label class="block text-sm font-medium text-slate-300 mb-1">Indoklás (opcionális)</label>
            <textarea
              v-model="rejectReason"
              rows="3"
              placeholder="Add meg az elutasítás okát..."
              class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-rose-500/50 focus:border-rose-500 text-sm resize-none"
            ></textarea>
          </div>
          <div class="flex justify-end gap-3">
            <button type="button" @click="showRejectModal = false" class="px-4 py-2 text-sm text-slate-400 hover:text-white transition">Mégse</button>
            <button type="submit" :disabled="actionLoading" class="px-4 py-2 bg-rose-600 hover:bg-rose-500 disabled:bg-rose-600/50 text-white rounded-lg text-sm font-medium transition flex items-center gap-2">
              <svg v-if="actionLoading" class="w-4 h-4 animate-spin" 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>
              Elutasítás
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- Flag Modal -->
    <div v-if="showFlagModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showFlagModal = false">
      <div class="bg-slate-800 rounded-xl border border-slate-700 p-6 w-full max-w-lg mx-4 shadow-2xl">
        <h2 class="text-lg font-semibold text-white mb-2">Szolgáltató megjelölése</h2>
        <p class="text-sm text-slate-400 mb-6">
          Megjelölöd a(z) <strong class="text-white">{{ provider?.name }}</strong> szolgáltatót? Ez visszavonja a jóváhagyását.
        </p>
        <form @submit.prevent="flagProvider">
          <div class="mb-4">
            <label class="block text-sm font-medium text-slate-300 mb-1">Indoklás (opcionális)</label>
            <textarea
              v-model="flagReason"
              rows="3"
              placeholder="Add meg a megjelölés okát..."
              class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 text-sm resize-none"
            ></textarea>
          </div>
          <div class="flex justify-end gap-3">
            <button type="button" @click="showFlagModal = false" class="px-4 py-2 text-sm text-slate-400 hover:text-white transition">Mégse</button>
            <button type="submit" :disabled="actionLoading" class="px-4 py-2 bg-purple-600 hover:bg-purple-500 disabled:bg-purple-600/50 text-white rounded-lg text-sm font-medium transition flex items-center gap-2">
              <svg v-if="actionLoading" class="w-4 h-4 animate-spin" 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>
              Megjelölés
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- Success Toast -->
    <div v-if="toast" class="fixed bottom-6 right-6 z-50 bg-emerald-600 text-white px-4 py-3 rounded-lg shadow-lg text-sm flex items-center gap-2 animate-slide-up">
      <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      {{ toast }}
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  middleware: 'auth',
})

const route = useRoute()
const router = useRouter()
const { formatDate } = useFormatter()

interface ProviderDetail {
  id: number
  name: string
  address: string
  city: string | null
  address_zip: string | null
  address_street_name: string | null
  address_street_type: string | null
  address_house_number: string | null
  plus_code: string | null
  contact_phone: string | null
  contact_email: string | null
  website: string | null
  category: string | null
  status: string
  source: string
  validation_score: number
  evidence_image_path: string | null
  added_by_user_id: number | null
  created_at: string | null
}

const loading = ref(true)
const error = ref(false)
const provider = ref<ProviderDetail | null>(null)
const toast = ref('')
const actionLoading = ref(false)

// Reject modal
const showRejectModal = ref(false)
const rejectReason = ref('')

// Flag modal
const showFlagModal = ref(false)
const flagReason = ref('')

function getHeaders(): Record<string, string> {
  const tokenCookie = useCookie('access_token')
  const token = tokenCookie.value
  return token ? { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' } : { 'Content-Type': 'application/json' }
}

function showToast(msg: string) {
  toast.value = msg
  setTimeout(() => { toast.value = '' }, 3000)
}

function goBack() {
  router.push('/providers')
}

function statusLabel(status: string): string {
  const map: Record<string, string> = {
    pending: 'Függőben lévő szolgáltató',
    approved: 'Jóváhagyott szolgáltató',
    rejected: 'Elutasított szolgáltató',
    flagged: 'Megjelölt szolgáltató',
  }
  return map[status] || status
}

function statusDescription(status: string): string {
  const map: Record<string, string> = {
    pending: 'Ez a szolgáltató még moderálásra vár. Jóváhagyhatod vagy elutasíthatod.',
    approved: 'A szolgáltató jóváhagyásra került és elérhető a felhasználók számára.',
    rejected: 'A szolgáltató elutasításra került és nem elérhető.',
    flagged: 'A szolgáltató megjelölésre került és visszavonásra került a jóváhagyása.',
  }
  return map[status] || ''
}

const statusBannerClass = computed(() => {
  const map: Record<string, string> = {
    pending: 'bg-amber-500/10 border-amber-500/30',
    approved: 'bg-emerald-500/10 border-emerald-500/30',
    rejected: 'bg-rose-500/10 border-rose-500/30',
    flagged: 'bg-purple-500/10 border-purple-500/30',
  }
  return map[provider.value?.status || ''] || 'bg-slate-500/10 border-slate-500/30'
})

const statusIconClass = computed(() => {
  const map: Record<string, string> = {
    pending: 'bg-amber-500/20 text-amber-400',
    approved: 'bg-emerald-500/20 text-emerald-400',
    rejected: 'bg-rose-500/20 text-rose-400',
    flagged: 'bg-purple-500/20 text-purple-400',
  }
  return map[provider.value?.status || ''] || 'bg-slate-500/20 text-slate-400'
})

const statusTextClass = computed(() => {
  const map: Record<string, string> = {
    pending: 'text-amber-400',
    approved: 'text-emerald-400',
    rejected: 'text-rose-400',
    flagged: 'text-purple-400',
  }
  return map[provider.value?.status || ''] || 'text-slate-400'
})

const statusSubtextClass = computed(() => {
  const map: Record<string, string> = {
    pending: 'text-amber-400/70',
    approved: 'text-emerald-400/70',
    rejected: 'text-rose-400/70',
    flagged: 'text-purple-400/70',
  }
  return map[provider.value?.status || ''] || 'text-slate-400/70'
})

async function fetchProvider() {
  loading.value = true
  error.value = false
  try {
    const data = await $fetch<ProviderDetail>(`/api/v1/admin/providers/${route.params.id}`, { headers: getHeaders() })
    provider.value = data
  } catch (e) {
    console.error('Failed to fetch provider:', e)
    error.value = true
  } finally {
    loading.value = false
  }
}

async function approveProvider() {
  if (!provider.value) return
  actionLoading.value = true
  try {
    await $fetch(`/api/v1/admin/providers/${provider.value.id}/approve`, {
      method: 'POST',
      headers: getHeaders(),
      body: { reason: 'Admin approved via detail page' },
    })
    showToast(`"${provider.value.name}" sikeresen jóváhagyva`)
    await fetchProvider()
  } catch (e: any) {
    const detail = e?.response?._data?.detail || e?.data?.detail || 'Ismeretlen hiba'
    showToast(`Hiba: ${detail}`)
    console.error('Failed to approve provider:', e)
  } finally {
    actionLoading.value = false
  }
}

function openRejectModal() {
  rejectReason.value = ''
  showRejectModal.value = true
}

async function rejectProvider() {
  if (!provider.value) return
  actionLoading.value = true
  try {
    await $fetch(`/api/v1/admin/providers/${provider.value.id}/reject`, {
      method: 'POST',
      headers: getHeaders(),
      body: { reason: rejectReason.value || 'Admin rejected via detail page' },
    })
    showToast(`"${provider.value.name}" elutasítva`)
    showRejectModal.value = false
    await fetchProvider()
  } catch (e: any) {
    const detail = e?.response?._data?.detail || e?.data?.detail || 'Ismeretlen hiba'
    showToast(`Hiba: ${detail}`)
    console.error('Failed to reject provider:', e)
  } finally {
    actionLoading.value = false
  }
}

function openFlagModal() {
  flagReason.value = ''
  showFlagModal.value = true
}

async function flagProvider() {
  if (!provider.value) return
  actionLoading.value = true
  try {
    await $fetch(`/api/v1/admin/providers/${provider.value.id}/flag`, {
      method: 'POST',
      headers: getHeaders(),
      body: { reason: flagReason.value || 'Admin flagged via detail page' },
    })
    showToast(`"${provider.value.name}" megjelölve`)
    showFlagModal.value = false
    await fetchProvider()
  } catch (e: any) {
    const detail = e?.response?._data?.detail || e?.data?.detail || 'Ismeretlen hiba'
    showToast(`Hiba: ${detail}`)
    console.error('Failed to flag provider:', e)
  } finally {
    actionLoading.value = false
  }
}

async function deleteProvider() {
  if (!provider.value) return
  actionLoading.value = true
  try {
    await $fetch(`/api/v1/admin/providers/${provider.value.id}`, {
      method: 'DELETE',
      headers: getHeaders(),
    })
    showToast(`"${provider.value.name}" törölve`)
    setTimeout(() => router.push('/providers'), 1500)
  } catch (e: any) {
    const detail = e?.response?._data?.detail || e?.data?.detail || 'Ismeretlen hiba'
    showToast(`Hiba: ${detail}`)
    console.error('Failed to delete provider:', e)
  } finally {
    actionLoading.value = false
  }
}

onMounted(() => {
  fetchProvider()
})
</script>

<style scoped>
.animate-slide-up {
  animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>