Support Ticket Base

<section class="ws-support-ticket bg-[var(--ws-support-ticket-bg)] py-16">
  <div class="mx-auto max-w-3xl px-6">
    <!-- Ticket Header -->
    <div class="border-b border-slate-200 pb-6">
      <div class="flex flex-wrap items-center gap-3">
        <span class="text-sm font-mono text-slate-400">#1234</span>
        <span class="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700">Open</span>
        <span class="rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-700">High Priority</span>
      </div>
      <h1 class="mt-3 text-2xl font-bold text-slate-900">Unable to export data from dashboard</h1>
      <div class="mt-3 flex flex-wrap items-center gap-4 text-sm text-slate-500">
        <span>Created Mar 22, 2026</span>
        <span class="hidden sm:inline">&middot;</span>
        <div class="flex items-center gap-2">
          <span>Assigned to</span>
          <div class="flex items-center gap-1.5">
            <div class="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-100 text-xs font-medium text-indigo-700">MR</div>
            <span class="font-medium text-slate-700">Maria Rodriguez</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Conversation Thread -->
    <div class="mt-8 space-y-6">
      <!-- Customer message -->
      <div class="flex gap-3">
        <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-slate-200 text-sm font-medium text-slate-600">JD</div>
        <div class="min-w-0 flex-1">
          <div class="flex items-center gap-2">
            <span class="text-sm font-semibold text-slate-900">John Doe</span>
            <span class="text-xs text-slate-400">Mar 22, 2026 at 10:15 AM</span>
          </div>
          <div class="mt-2 rounded-xl rounded-tl-sm bg-slate-100 px-4 py-3 text-sm text-slate-700">
            <p>Hi, I'm trying to export the analytics data from my dashboard but the export button doesn't seem to work. When I click it, nothing happens. I've tried both Chrome and Firefox.</p>
            <p class="mt-2">I need this data for a quarterly report that's due by end of week. Could you please look into this urgently?</p>
          </div>
        </div>
      </div>

      <!-- Agent message -->
      <div class="flex gap-3">
        <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-sm font-medium text-indigo-700">MR</div>
        <div class="min-w-0 flex-1">
          <div class="flex items-center gap-2">
            <span class="text-sm font-semibold text-slate-900">Maria Rodriguez</span>
            <span class="rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-medium text-indigo-700">Agent</span>
            <span class="text-xs text-slate-400">Mar 22, 2026 at 11:03 AM</span>
          </div>
          <div class="mt-2 rounded-xl rounded-tl-sm bg-indigo-50 px-4 py-3 text-sm text-slate-700">
            <p>Hi John, thanks for reaching out! I understand this is urgent with your quarterly report.</p>
            <p class="mt-2">I've been able to reproduce the issue. It appears the export function was affected by our latest update. Our engineering team is already working on a fix.</p>
            <p class="mt-2">In the meantime, I can manually export the data for you. Could you let me know the date range and which metrics you need?</p>
          </div>
        </div>
      </div>

      <!-- Customer reply -->
      <div class="flex gap-3">
        <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-slate-200 text-sm font-medium text-slate-600">JD</div>
        <div class="min-w-0 flex-1">
          <div class="flex items-center gap-2">
            <span class="text-sm font-semibold text-slate-900">John Doe</span>
            <span class="text-xs text-slate-400">Mar 22, 2026 at 11:30 AM</span>
          </div>
          <div class="mt-2 rounded-xl rounded-tl-sm bg-slate-100 px-4 py-3 text-sm text-slate-700">
            <p>That would be great, thank you! I need the data from January 1 to March 21 for page views, unique visitors, and conversion rate. A CSV format would be perfect.</p>
          </div>
        </div>
      </div>

      <!-- Agent reply -->
      <div class="flex gap-3">
        <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-sm font-medium text-indigo-700">MR</div>
        <div class="min-w-0 flex-1">
          <div class="flex items-center gap-2">
            <span class="text-sm font-semibold text-slate-900">Maria Rodriguez</span>
            <span class="rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-medium text-indigo-700">Agent</span>
            <span class="text-xs text-slate-400">Mar 22, 2026 at 12:15 PM</span>
          </div>
          <div class="mt-2 rounded-xl rounded-tl-sm bg-indigo-50 px-4 py-3 text-sm text-slate-700">
            <p>I've attached the CSV export with the requested data. The export fix should be deployed by tomorrow morning. I'll follow up once it's live.</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Reply form -->
    <div class="mt-8 border-t border-slate-200 pt-6">
      <label for="reply" class="text-sm font-semibold text-slate-900">Reply</label>
      <textarea id="reply" rows="4" class="mt-2 block w-full rounded-xl border border-slate-300 bg-[var(--ws-support-ticket-input-bg)] px-4 py-3 text-sm text-slate-900 placeholder-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20" placeholder="Type your reply..."></textarea>
      <div class="mt-3 flex items-center justify-between">
        <button type="button" class="inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 dark:hover:bg-slate-800 dark:hover:text-slate-300">
          <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="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/></svg>
          Attach file
        </button>
        <button type="submit" class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700">Send Reply</button>
      </div>
    </div>
  </div>
</section>