<script>
  /**
   * /study/topics/[id]/questions/[qid] — 문제 상세 (PR-11 신규).
   *
   * 읽기전용. 정답을 미리 보여주는 "검토/학습 자료" 페이지.
   * 풀이 페이지가 아니므로 "문제 상세" 라벨 사용.
   *
   * URL 직접 접근 가능 — 통합뷰 detail 의존 없이 자체 fetch:
   *   1) GET /study-questions/{qid} → 본문/보기/정답/해설/이미지/통계
   *   2) 응답의 study_topic_id + exam_round 확인
   *   3) GET /study-topics/{tid}/questions?page_size=200 → 같은 회차 prev/next
   *      (200건 만땅이면 토스트 — 조용히 자르지 않음)
   *
   * AI 해설 5상태: idle / loading / success / stale / error.
   * regenerate=true 옵션으로 강제 재생성 (PR-3 검증된 동작).
   *
   * 이미지/사용자 해설 없으면 섹션 숨김.
   */
  import { onMount } from 'svelte';
  import { page } from '$app/stores';
  import { goto } from '$app/navigation';
  import { api } from '$lib/api';
  import { addToast } from '$lib/stores/toast';
  import {
    ArrowLeft, ArrowRight, Edit, Sparkles, AlertCircle, CheckCircle2, XCircle, ListChecks, Flag,
  } from 'lucide-svelte';
  import { renderMathMarkdown, renderMathMarkdownInline } from '$lib/utils/mathMarkdown';
  import Button from '$lib/components/ui/Button.svelte';
  import Card from '$lib/components/ui/Card.svelte';
  import Skeleton from '$lib/components/ui/Skeleton.svelte';
  import EmptyState from '$lib/components/ui/EmptyState.svelte';
  import ImgAuth from '$lib/components/ImgAuth.svelte';

  // PR-12-A 후속: 같은 회차 안 prev/next 이동 시 100문항 batch 응답을 재사용.
  // module-level 캐시 — 페이지 reload 시 초기화. 5분 TTL 안 cache hit.
  // 채점/편집/삭제 등 다른 탭 mutation 은 TTL 만료까지 stale 가능.
  const ROUND_SIBLINGS_TTL_MS = 5 * 60 * 1000;
  const roundSiblingsCache = new Map();

  function roundSiblingsKey(topicId, examRound) {
    // exam_round 가 한국어/공백/특수문자 포함이라 안전 키로 encode.
    return `${topicId}:${encodeURIComponent(examRound ?? '')}`;
  }

  function getCachedSiblings(topicId, examRound) {
    const key = roundSiblingsKey(topicId, examRound);
    const entry = roundSiblingsCache.get(key);
    if (!entry) return null;
    if (Date.now() - entry.fetchedAt > ROUND_SIBLINGS_TTL_MS) {
      roundSiblingsCache.delete(key);
      return null;
    }
    // 얕은 복사 — 호출자가 정렬/변형해도 캐시 원본 보존.
    return { ...entry, items: [...entry.items] };
  }

  function setCachedSiblings(topicId, examRound, items, total) {
    roundSiblingsCache.set(roundSiblingsKey(topicId, examRound), {
      items: [...items],
      total,
      fetchedAt: Date.now(),
    });
  }

  let topicId = $derived(Number($page.params.id));
  let qid = $derived(Number($page.params.qid));
  let topicName = $state('');

  let q = $state(null); // GET /study-questions/{qid} 응답
  let loading = $state(true);

  // 같은 회차 prev/next — exam_round 있을 때만.
  let roundSiblings = $state([]); // [{id, exam_question_number, created_at}, ...] 정렬됨

  // AI 해설 상태머신: 'idle' | 'loading' | 'success' | 'stale' | 'error'
  let aiState = $state('idle');
  let aiData = $state(null); // AIExplanationResponse
  let aiError = $state(null);

  // PR-12-A: 반복 출제 / 유사 유형 (자동 fetch). PR-5 의 비슷한 문제 토글 대체.
  let relatedLoading = $state(false);
  let related = $state(null); // RelatedTypesResponse

  async function loadTopic() {
    try {
      const t = await api(`/study-topics/${topicId}`);
      topicName = t?.topic?.name ?? '';
    } catch {}
  }

  /** 같은 회차 prev/next 후보 fetch. exam_round 가 truthy 일 때만.
   *
   * 백엔드의 ?exam_round= 필터로 한 회차만 받음 (1천+ 토픽 환경 대비).
   * 한 회차가 200문항 초과 특수 케이스에서만 토스트 경고.
   */
  async function loadRoundSiblings() {
    roundSiblings = [];
    if (!q?.exam_round) return; // null/empty → prev/next 비활성
    const cached = getCachedSiblings(topicId, q.exam_round);
    if (cached) {
      roundSiblings = cached.items;
      return;
    }
    try {
      const params = new URLSearchParams({
        page_size: '200',
        exam_round: q.exam_round,
      });
      const res = await api(`/study-topics/${topicId}/questions?${params}`);
      const items = res.items ?? [];
      // 한 회차 200+ 특수 케이스 — 일반적으로 100문항이라 안 나옴.
      if (items.length === 200 && (res.total ?? 0) > 200) {
        addToast('info', '이 회차에 200문항 초과 — 이전/다음 문제가 일부 누락될 수 있습니다');
      }
      // 백엔드도 정렬되어 오지만 클라이언트도 안정성 위해 명시.
      items.sort((a, b) => {
        const an = a.exam_question_number;
        const bn = b.exam_question_number;
        if (an != null && bn != null) return an - bn;
        if (an != null) return -1;
        if (bn != null) return 1;
        return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
      });
      roundSiblings = items;
      setCachedSiblings(topicId, q.exam_round, items, res.total ?? items.length);
    } catch {
      roundSiblings = [];
    }
  }

  async function load() {
    loading = true;
    try {
      q = await api(`/study-questions/${qid}`);
      aiState = 'idle';
      aiData = null;
      aiError = null;
      related = null;
      // body 표시는 q 도착 직후. 관련 유형/회차 sibling 은 fire-and-forget —
      // related 섹션은 자체 relatedLoading 플래그, prev/next 는 siblings 비면 안 보임.
      loading = false;
      void Promise.allSettled([loadRoundSiblings(), loadRelatedTypes()]);
    } catch (err) {
      addToast('error', err?.detail || '문제 로드 실패');
      q = null;
      loading = false;
    }
  }

  // PR-12-A 후속: 반복 출제 등급 → 라벨 매핑. round_count 기반 fallback 으로 구 응답 호환.
  function repeatBadge(grade, roundCount) {
    if (grade === '단골') return { emoji: '🌟', text: '단골' };
    if (grade === '잘 나오는 반복 출제') return { emoji: '🔥', text: '잘 나오는 반복 출제' };
    if (grade === '반복 출제') return { emoji: '🔥', text: '반복 출제' };
    if (grade === '신출') return { emoji: '🆕', text: '신출' };
    if (grade === '빈출') return { emoji: '📜', text: '빈출' };
    if (roundCount >= 2) return { emoji: '🔥', text: '반복 출제' };
    return null;
  }

  /** PR-12-A: 반복 출제 / 유사 유형 분리. 회차 조건은 백엔드가 강제. */
  async function loadRelatedTypes() {
    relatedLoading = true;
    try {
      related = await api(`/study-questions/${qid}/related-types`);
    } catch {
      related = null;
    } finally {
      relatedLoading = false;
    }
  }

  onMount(() => {
    // loadTopic 결과는 breadcrumb 만 — 본문과 의존성 0.
    // Promise.allSettled 로 fire-and-forget 병렬 — 한 쪽 실패가 다른 쪽 차단 X.
    void Promise.allSettled([loadTopic(), load()]);
  });

  // qid 가 prev/next 로 바뀌면 다시 로드
  $effect(() => {
    void qid;
    if (Number.isFinite(qid)) {
      // onMount 첫 호출과 중복 방지: q?.id 와 qid 가 다를 때만.
      if (q && q.id !== qid) load();
    }
  });

  /** AI 해설 호출. regenerate 옵션 명시. */
  async function loadAi(regenerate = false) {
    aiState = 'loading';
    aiError = null;
    try {
      const res = await api(`/study-questions/${qid}/ai-explanation`, {
        method: 'POST',
        body: JSON.stringify({ regenerate }),
      });
      aiData = res;
      if (res.ai_explanation_status === 'failed') {
        aiState = 'error';
        aiError = '풀이 생성 실패. 다시 시도해주세요.';
      } else if (res.is_stale) {
        aiState = 'stale';
      } else {
        aiState = 'success';
      }
    } catch (err) {
      aiState = 'error';
      aiError = err?.status === 409
        ? '다른 호출이 풀이를 생성 중입니다. 잠시 후 다시 시도해주세요.'
        : (err?.detail || 'AI 해설을 불러오지 못했습니다. 다시 시도해 주세요.');
    }
  }

  // 보기 4지선다 derived (마크업에서 {@const} 위치 제약 회피).
  let choices = $derived(q ? [
    { number: 1, text: q.choice_1 },
    { number: 2, text: q.choice_2 },
    { number: 3, text: q.choice_3 },
    { number: 4, text: q.choice_4 },
  ] : []);

  // prev/next 계산. exam_round truthy 일 때만 활성.
  let currentSiblingIdx = $derived(roundSiblings.findIndex((s) => s.id === qid));
  let prevSibling = $derived(currentSiblingIdx > 0 ? roundSiblings[currentSiblingIdx - 1] : null);
  let nextSibling = $derived(
    currentSiblingIdx >= 0 && currentSiblingIdx < roundSiblings.length - 1
      ? roundSiblings[currentSiblingIdx + 1]
      : null
  );

  function goSibling(s) {
    if (!s) return;
    goto(`/study/topics/${topicId}/questions/${s.id}`);
  }

  function fmtDateTime(s) {
    if (!s) return '';
    return new Date(s).toLocaleString('ko-KR', { dateStyle: 'short', timeStyle: 'short' });
  }

  // 이 문제 이상해요 신고 토글 (PATCH needs_review). 신고함(/study/questions-review)에 모임.
  let flagBusy = $state(false);
  async function toggleFlag() {
    if (flagBusy || !q) return;
    flagBusy = true;
    const next = !q.needs_review;
    try {
      const res = await api(`/study-questions/${qid}`, {
        method: 'PATCH',
        body: JSON.stringify({ needs_review: next }),
      });
      q = { ...q, needs_review: res.needs_review, flagged_by: res.flagged_by, flagged_at: res.flagged_at };
      addToast(next ? 'success' : 'info', next ? '이상 문제로 신고했어요 — 검수함에 모았습니다' : '신고를 해제했어요');
    } catch (err) {
      addToast('error', err?.detail || '신고 처리 실패');
    } finally {
      flagBusy = false;
    }
  }
</script>

<svelte:head><title>문제 상세 — {topicName || '주제'}</title></svelte:head>

<div class="p-4 md:p-6 max-w-3xl mx-auto">
  <div class="flex items-center gap-2 text-xs md:text-sm mb-3">
    <a href="/study" class="text-dim hover:text-text">공부</a>
    <span class="text-faint">/</span>
    <a href="/study/topics" class="text-dim hover:text-text">주제</a>
    <span class="text-faint">/</span>
    <a href={`/study/topics/${topicId}`} class="text-dim hover:text-text truncate">{topicName || '...'}</a>
    <span class="text-faint">/</span>
    <span class="text-text font-medium">문제 #{qid}</span>
  </div>

  {#if loading}
    <Skeleton h="h-32" rounded="lg" />
  {:else if !q}
    <EmptyState title="문제를 찾을 수 없습니다" description="삭제되었거나 권한이 없는 문제입니다." />
    <div class="mt-3">
      <Button href={`/study/topics/${topicId}`} icon={ArrowLeft}>주제로</Button>
    </div>
  {:else}
    <Card>
      {#snippet children()}
        <div class="p-5 flex flex-col gap-4">
          <!-- 헤더 -->
          <div class="flex items-start justify-between gap-3 flex-wrap pb-3 border-b border-default">
            <div class="flex-1 min-w-0">
              <h1 class="text-base font-semibold text-text">문제 상세</h1>
              <div class="text-[11px] text-dim mt-1 flex items-center gap-2 flex-wrap">
                {#if q.subject}<span>{q.subject}</span>{/if}
                {#if q.scope}<span>· {q.scope}</span>{/if}
                {#if q.exam_round}
                  <span>·
                    <a href={`/study/topics/${topicId}/exam-rounds`} class="hover:text-accent">{q.exam_round}</a>
                  </span>
                {/if}
                {#if q.exam_question_number}<span>· {q.exam_question_number}번</span>{/if}
                {#if !q.is_active}<span class="text-warning">· 비활성</span>{/if}
              </div>
            </div>
            <div class="flex items-center gap-1.5 shrink-0">
              <button
                type="button"
                onclick={toggleFlag}
                disabled={flagBusy}
                class="flex items-center gap-1.5 text-xs h-7 px-2.5 rounded-md border transition-colors disabled:opacity-50
                  {q.needs_review
                    ? 'border-warning bg-warning/10 text-warning'
                    : 'border-default text-dim hover:text-warning hover:border-warning/40'}"
                title="문제나 정답이 이상하면 신고해 검수함에 모아둡니다"
              >
                <Flag size={13} />
                <span>{q.needs_review ? '신고됨' : '이 문제 이상해요'}</span>
              </button>
              <Button href={`/study/topics/${topicId}/questions/${qid}/edit`} size="sm" variant="ghost" icon={Edit}>편집</Button>
            </div>
          </div>

          <!-- 본문 -->
          <div class="text-base text-text leading-relaxed markdown-body math-area">
            {@html renderMathMarkdown(q.question_text)}
          </div>

          <!-- 첨부 이미지 (있을 때만) -->
          {#if q.images?.length > 0}
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
              {#each q.images as img (img.id)}
                <ImgAuth src={img.served_url} class="w-full max-h-72 object-contain rounded border border-default bg-bg/30" />
              {/each}
            </div>
          {/if}

          <!-- 4지선다 + 정답 표시 -->
          <div class="flex flex-col gap-1.5">
            {#each choices as ch (ch.number)}
              {@const isCorrect = q.correct_choice === ch.number}
              <div class="p-2.5 rounded border flex items-start gap-3 text-sm
                {isCorrect ? 'border-success bg-success/10 text-text' : 'border-default bg-surface text-dim'}"
              >
                <span class="font-semibold w-5 shrink-0">{ch.number}</span>
                <span class="flex-1 math-area overflow-x-auto">{@html renderMathMarkdownInline(ch.text)}</span>
                {#if isCorrect}<CheckCircle2 size={14} class="text-success shrink-0" />{/if}
              </div>
            {/each}
          </div>

          <!-- 사용자 입력 해설 (있을 때만) -->
          {#if q.explanation}
            <div class="rounded border border-default bg-bg/30 p-3 text-sm text-text">
              <div class="text-[10px] text-dim mb-1.5 font-medium">사용자 입력 해설</div>
              <div class="markdown-body math-area">{@html renderMathMarkdown(q.explanation)}</div>
            </div>
          {/if}

          <!-- AI 해설 (PR-3) — 5상태 명시 -->
          <div class="rounded border border-default bg-bg/30 p-3 flex flex-col gap-2">
            <div class="flex items-center gap-2 flex-wrap">
              <Sparkles size={14} class="text-accent" />
              <span class="text-xs font-semibold text-text">AI 해설</span>
              {#if aiState === 'stale'}
                <span class="text-[10px] text-warning border border-warning/40 rounded px-1.5 py-0.5">stale</span>
              {:else if aiState === 'success' && aiData?.from_cache}
                <span class="text-[10px] text-dim">캐시</span>
              {/if}
              <span class="ml-auto flex items-center gap-1.5">
                {#if aiState === 'idle'}
                  <Button size="sm" variant="ghost" onclick={() => loadAi(false)}>해설 보기</Button>
                {:else if aiState === 'loading'}
                  <Button size="sm" variant="ghost" loading={true}>생성 중…</Button>
                {:else if aiState === 'stale'}
                  <Button size="sm" onclick={() => loadAi(true)}>다시 생성</Button>
                {:else if aiState === 'error'}
                  <Button size="sm" onclick={() => loadAi(true)}>다시 시도</Button>
                {:else}
                  <Button size="sm" variant="ghost" onclick={() => loadAi(true)}>다시 생성</Button>
                {/if}
              </span>
            </div>

            {#if aiState === 'loading'}
              <div class="text-[11px] text-dim">해설을 생성하는 중입니다… (캐시 hit 시 1초, miss 시 최대 30초)</div>
            {:else if aiState === 'stale'}
              <div class="text-[11px] text-warning bg-warning/5 border border-warning/30 rounded px-2 py-1.5 flex items-start gap-1.5">
                <AlertCircle size={12} class="mt-0.5 shrink-0" />
                <span>이 풀이는 정답·문제가 수정된 후의 이전 풀이입니다. "다시 생성" 으로 새로 만들 수 있습니다.</span>
              </div>
            {:else if aiState === 'error'}
              <div class="text-[11px] text-error">{aiError || 'AI 해설을 불러오지 못했습니다. 다시 시도해 주세요.'}</div>
            {/if}

            {#if (aiState === 'success' || aiState === 'stale') && aiData?.ai_explanation}
              <div class="text-xs text-text leading-relaxed markdown-body math-area">
                {@html renderMathMarkdown(aiData.ai_explanation)}
              </div>
              {#if aiData.evidence?.length}
                <details class="text-[10px] text-dim">
                  <summary class="cursor-pointer hover:text-text">참고 근거 {aiData.evidence.length}건</summary>
                  <ul class="mt-1 flex flex-col gap-1">
                    {#each aiData.evidence as ev}
                      <li>
                        <span class="text-text">{ev.source_type === 'document' ? '📄' : '❓'} {ev.title}</span>
                        <div class="pl-4 truncate">{ev.snippet}</div>
                      </li>
                    {/each}
                  </ul>
                </details>
              {/if}
            {/if}
          </div>

          <!-- 누적 통계 -->
          <div class="text-[11px] text-dim border-t border-default pt-3">
            누적 시도 {q.stats?.attempt_count ?? 0}회 ·
            정답 {q.stats?.correct_count ?? 0} ·
            오답 {q.stats?.wrong_count ?? 0}
          </div>

          <!-- PR-12-A: 반복 출제 / 유사 유형 -->
          {@render relatedSections()}

          <!-- 푸터 네비게이션 -->
          <div class="flex items-center justify-between gap-2 pt-3 border-t border-default flex-wrap">
            <Button href={`/study/topics/${topicId}`} variant="ghost" size="sm" icon={ArrowLeft}>주제로</Button>
            {#if q.exam_round}
              <Button href={`/study/topics/${topicId}/exam-rounds`} variant="ghost" size="sm" icon={ListChecks}>회차 카드</Button>
            {/if}
            <div class="flex items-center gap-2 ml-auto">
              <Button
                size="sm"
                variant="ghost"
                icon={ArrowLeft}
                disabled={!prevSibling}
                onclick={() => goSibling(prevSibling)}
              >이전</Button>
              {#if q.exam_round && roundSiblings.length > 0}
                <span class="text-[11px] text-dim">
                  {currentSiblingIdx + 1} / {roundSiblings.length}
                </span>
              {/if}
              <Button
                size="sm"
                icon={ArrowRight}
                iconPosition="right"
                disabled={!nextSibling}
                onclick={() => goSibling(nextSibling)}
              >다음</Button>
            </div>
          </div>
        </div>
      {/snippet}
    </Card>
  {/if}
</div>

<!-- PR-12-A: 반복 출제 (🔥) + 유사 유형 (🧩) 분리 표시. 회차 조건 백엔드 강제. -->
{#snippet relatedSections()}
  {@const repeats = related?.repeat_questions ?? []}
  {@const sims = related?.similar_questions ?? []}
  {@const repeatRound = related?.repeat_round_count ?? 0}
  {@const similarRound = related?.similar_round_count ?? 0}
  {@const repeatRel = related?.repeat_related_count ?? 0}
  {@const similarRel = related?.similar_related_count ?? 0}
  {@const sourceStatus = related?.source_status ?? 'none'}
  {@const sourceRound = related?.source_exam_round ?? null}

  {#if relatedLoading && !related}
    <div class="text-[11px] text-dim">반복 출제·유사 유형 분석 중…</div>
  {:else if related}
    {#if sourceStatus !== 'ready'}
      <div class="rounded border border-default bg-bg/30 p-3 text-[11px] text-dim">
        {#if sourceStatus === 'pending'}임베딩 생성 중입니다. 잠시 후 다시.
        {:else if sourceStatus === 'failed'}임베딩 생성 실패. 다음 cron 자동 재시도.
        {:else if sourceStatus === 'stale'}본문 변경 후 임베딩 재계산 대기 중.
        {:else}임베딩 미생성. 약 1분 안에 cron 처리.
        {/if}
      </div>
    {:else if !sourceRound}
      <div class="rounded border border-default bg-bg/30 p-3 text-[11px] text-dim">
        회차가 지정되지 않은 문제는 회차 간 반복 출제 분석을 할 수 없습니다.
      </div>
    {:else if repeats.length === 0 && sims.length === 0}
      <!-- 둘 다 없으면 섹션 자체 숨김 -->
    {:else}
      {#if repeats.length > 0}
        {@const badge = repeatBadge(related?.repeat_grade, repeatRound)}
        <div class="rounded border border-default bg-bg/30 p-3 flex flex-col gap-2">
          <div class="flex items-center gap-2 flex-wrap">
            <span class="text-base">{badge?.emoji ?? '🔥'}</span>
            <span class="text-xs font-semibold text-text">{badge?.text ?? '반복 출제'}</span>
            <span class="text-[11px] text-dim">· {repeatRound}개 회차</span>
          </div>
          <div class="text-[11px] text-dim">
            거의 같은 형태의 문제가 여러 회차에 출제되었습니다. 문제와 정답 구조를 확실히 기억해두는 것이 좋습니다.
          </div>
          <div class="text-[10px] text-dim">관련 반복 문제 {repeatRel}개</div>
          <ul class="flex flex-col gap-1.5">
            {#each repeats as it (it.id)}
              <a
                href={`/study/topics/${it.study_topic_id}/questions/${it.id}`}
                class="flex items-center gap-3 p-2 rounded border border-default bg-surface hover:border-accent transition-colors"
              >
                <div class="flex-1 min-w-0">
                  <div class="text-xs text-text truncate">
                    {#if it.exam_round}<span class="text-dim">{it.exam_round}{#if it.exam_question_number} {it.exam_question_number}번{/if} ·</span> {/if}{it.question_text}
                  </div>
                  <div class="text-[10px] text-dim mt-0.5 flex items-center gap-2 flex-wrap">
                    {#if it.subject}<span>{it.subject}</span>{/if}
                    {#if it.scope}<span>· {it.scope}</span>{/if}
                  </div>
                </div>
                <span class="text-[10px] text-accent font-medium shrink-0">{Math.round(it.similarity * 100)}%</span>
                <ArrowRight size={11} class="text-dim shrink-0" />
              </a>
            {/each}
          </ul>
        </div>
      {/if}

      {#if sims.length > 0}
        <div class="rounded border border-default bg-bg/30 p-3 flex flex-col gap-2">
          <div class="flex items-center gap-2 flex-wrap">
            <span class="text-base">🧩</span>
            <span class="text-xs font-semibold text-text">유사 유형</span>
            <span class="text-[11px] text-dim">· {similarRound}개 회차</span>
          </div>
          <div class="text-[11px] text-dim">
            보기나 수치는 다르지만 같은 개념을 묻는 문제입니다. 공식 적용 방식과 조건 해석을 함께 복습하세요.
          </div>
          <div class="text-[10px] text-dim">관련 {similarRel}문제</div>
          <ul class="flex flex-col gap-1.5">
            {#each sims as it (it.id)}
              <a
                href={`/study/topics/${it.study_topic_id}/questions/${it.id}`}
                class="flex items-center gap-3 p-2 rounded border border-default bg-surface hover:border-accent transition-colors"
              >
                <div class="flex-1 min-w-0">
                  <div class="text-xs text-text truncate">
                    {#if it.exam_round}<span class="text-dim">{it.exam_round}{#if it.exam_question_number} {it.exam_question_number}번{/if} ·</span> {/if}{it.question_text}
                  </div>
                  <div class="text-[10px] text-dim mt-0.5 flex items-center gap-2 flex-wrap">
                    {#if it.subject}<span>{it.subject}</span>{/if}
                    {#if it.scope}<span>· {it.scope}</span>{/if}
                  </div>
                </div>
                <span class="text-[10px] text-accent font-medium shrink-0">{Math.round(it.similarity * 100)}%</span>
                <ArrowRight size={11} class="text-dim shrink-0" />
              </a>
            {/each}
          </ul>
        </div>
      {/if}
    {/if}
  {/if}
{/snippet}
