<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{ app_name }} v{{ app_version }} - Manual Review</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />

    <!-- Favicon -->
    <link rel="icon" href="/static/FenLiu.png" type="image/png" />
    <link rel="apple-touch-icon" href="/static/FenLiu.png" />

    <style>
      .stat-card {
        @apply bg-white rounded-lg shadow-md p-6 transition-all duration-300;
      }
      .stat-card:hover {
        @apply shadow-lg transform -translate-y-1;
      }
      .water-wave {
        @apply relative overflow-hidden;
      }
      .water-wave::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.4),
          transparent
        );
        opacity: 0.3;
      }
      .post-content {
        @apply text-gray-700 line-clamp-3;
      }
      .post-content a {
        @apply text-blue-600 hover:text-blue-800 underline;
      }
      .post-content a:hover {
        @apply no-underline;
      }

      /* Score badge styling */
      .score-low {
        @apply bg-green-100 text-green-800;
      }
      .score-medium {
        @apply bg-yellow-100 text-yellow-800;
      }
      .score-high {
        @apply bg-orange-100 text-orange-800;
      }
      .score-very-high {
        @apply bg-red-100 text-red-800;
      }

      /* Action buttons */
      .btn-approve {
        @apply bg-green-100 text-green-700 hover:bg-green-200 border border-green-300;
      }
      .btn-reject {
        @apply bg-red-100 text-red-700 hover:bg-red-200 border border-red-300;
      }
      .btn-score {
        @apply bg-blue-100 text-blue-700 hover:bg-blue-200 border border-blue-300;
      }

      .loading-spinner {
        border: 3px solid #f3f3f3;
        border-top: 3px solid #6366f1;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        animation: spin 1s linear infinite;
      }

      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      /* Mastodon-like media attachments styling */
      .media-attachments {
        margin: 12px 0;
      }

      /* Grid layouts based on number of attachments (like Mastodon) */
      .media-grid {
        display: grid;
        gap: 8px;
        border-radius: 8px;
        overflow: hidden;
      }

      /* 1 attachment: full width */
      .media-grid.single {
        grid-template-columns: 1fr;
        max-width: 100%;
      }

      /* 2 attachments: 2 columns */
      .media-grid.double {
        grid-template-columns: 1fr 1fr;
      }

      /* 3 attachments: 2 columns, first spans 2 rows */
      .media-grid.triple {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
      }

      /* 4+ attachments: 2x2 grid */
      .media-grid.multiple {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
      }

      .media-item {
        position: relative;
        background-color: #f3f4f6;
        overflow: hidden;
      }

      /* Single attachment styling */
      .media-grid.single .media-item {
        aspect-ratio: 16/9;
      }

      /* Multiple attachments styling */
      .media-grid:not(.single) .media-item {
        aspect-ratio: 1;
      }

      /* Triple grid: first item spans 2 rows */
      .media-grid.triple .media-item:first-child {
        grid-row: span 2;
      }

      .media-item a {
        display: block;
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: inherit;
      }

      .media-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border: 2px solid red !important; /* Debug border */
      }

      .media-item.video::before {
        content: "▶";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.7);
        color: white;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        z-index: 1;
        pointer-events: none;
      }

      .media-count {
        position: absolute;
        top: 8px;
        right: 8px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 12px;
        z-index: 1;
        pointer-events: none;
      }

      .media-description {
        font-size: 13px;
        color: #6b7280;
        margin-top: 6px;
        line-height: 1.4;
        padding: 0 4px;
      }

      /* Hover effects */
      .media-item {
        transition: opacity 0.2s ease;
      }

      .media-item:hover {
        opacity: 0.95;
      }

      /* Avatar styling */
      .avatar-placeholder {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        font-size: 12px;
        flex-shrink: 0;
        transition: all 0.2s ease;
        cursor: pointer;
      }

      @media (min-width: 640px) {
        .avatar-placeholder {
          width: 36px;
          height: 36px;
          font-size: 14px;
        }
      }
      .avatar-placeholder:hover {
        transform: scale(1.1);
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
      }

      /* Engagement metrics styling */
      .engagement-metrics {
        display: flex;
        gap: 8px;
        font-size: 11px;
        color: #6b7280;
        align-items: center;
        min-height: 24px;
      }
      .engagement-item {
        display: flex;
        align-items: center;
        gap: 2px;
        cursor: pointer;
        transition: color 0.2s ease;
      }
      .engagement-count {
        font-weight: 600;
      }
      .engagement-replies {
        color: #3b82f6;
      }
      .engagement-replies:hover {
        color: #2563eb;
      }
      .engagement-boosts {
        color: #10b981;
      }
      .engagement-boosts:hover {
        color: #059669;
      }
      .engagement-likes {
        color: #ef4444;
      }
      .engagement-likes:hover {
        color: #dc2626;
      }

      /* External link button */
      .btn-external {
        @apply bg-gray-100 text-gray-700 hover:bg-gray-200 border border-gray-300;
      }

      /* Table cell content wrapping */
      .table-cell-content {
        min-width: 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }

      .post-content-cell {
        min-width: 200px;
        max-width: 800px;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }

      @media (min-width: 768px) {
        .post-content-cell {
          max-width: 1000px;
        }
      }

      @media (min-width: 1024px) {
        .post-content-cell {
          max-width: 1200px;
        }
      }

      @media (min-width: 1280px) {
        .post-content-cell {
          max-width: 1400px;
        }
      }

      @media (min-width: 1536px) {
        .post-content-cell {
          max-width: 1600px;
        }
      }

      .author-cell {
        min-width: 120px;
      }

      .score-cell {
        min-width: 80px;
      }

      .stream-cell {
        min-width: 120px;
      }

      .engagement-cell {
        min-width: 100px;
      }

      .actions-cell {
        min-width: 140px;
      }

      /* Narrow screen optimizations (mobile) */
      @media (max-width: 639px) {
        /* Reduce table padding on mobile */
        #postsTable table th,
        #postsTable table td {
          padding-left: 0.5rem;
          padding-right: 0.5rem;
        }

        /* Ensure author column stacks properly */
        .author-cell .flex {
          /* The responsive classes handle this now */
        }

        /* Make author name and handle stack vertically */
        .author-cell .flex-col {
          display: flex;
          flex-direction: column;
        }

        .author-cell .block.sm\:inline {
          display: block;
          margin-left: 0 !important;
          margin-top: 0.125rem;
        }

        /* Reduce action button spacing */
        .actions-cell .flex.space-x-1 {
          gap: 0.125rem;
        }

        /* Adjust score badge size */
        .score-cell span {
          padding-left: 0.375rem;
          padding-right: 0.375rem;
          font-size: 0.75rem;
        }

        /* Ensure content fits within screen */
        .post-content-cell {
          max-width: calc(100vw - 2rem);
        }

        /* Adjust table header font size */
        #postsTable table th {
          font-size: 0.7rem;
          padding-top: 0.5rem;
          padding-bottom: 0.5rem;
        }

        /* Reduce avatar size on mobile */
        .avatar-placeholder {
          width: 24px;
          height: 24px;
          font-size: 10px;
        }
      }
    </style>
  </head>
  <body class="bg-gray-50 min-h-screen">
    <!-- Navigation -->
    <nav class="bg-white shadow-lg">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Hidden checkbox — acts as toggle state for the mobile menu (CSS-only, no JS) -->
        <input type="checkbox" id="mobile-menu-toggle" class="sr-only peer" />

        <div class="flex justify-between h-16">
          <div class="flex">
            <div class="flex-shrink-0 flex items-center">
              <img class="h-8 w-8" src="/static/FenLiu.png" alt="FenLiu Logo" />
              <span class="ml-2 text-xl font-bold text-gray-900"
                >{{ app_name }}</span
              >
              <span class="ml-2 text-sm text-gray-500">v{{ app_version }}</span>
            </div>
            <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
              <a
                href="/"
                class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
              >
                Dashboard
              </a>
              <a
                href="/streams"
                class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
              >
                Streams
              </a>

              <a
                href="/review"
                class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
                aria-current="page"
              >
                Review
              </a>
              <a
                href="/stats"
                class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
              >
                Stats
              </a>
            </div>
          </div>
          <!-- Mobile menu toggle label (replaces JS button) -->
          <div class="flex items-center sm:hidden">
            <label
              for="mobile-menu-toggle"
              class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 cursor-pointer"
              aria-label="Toggle main menu"
            >
              <i class="fas fa-bars text-xl"></i>
            </label>
          </div>
        </div>
      </div>

      <!-- Mobile menu: hidden by default, revealed via peer-checked when checkbox is ticked -->
      <div class="hidden peer-checked:block sm:hidden border-t border-gray-200">
        <div class="px-2 pt-2 pb-3 space-y-1">
          <a
            href="/"
            class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-50 rounded-md"
          >
            Dashboard
          </a>
          <a
            href="/streams"
            class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-50 rounded-md"
          >
            Streams
          </a>

          <a
            href="/review"
            class="block px-3 py-2 text-base font-medium text-gray-900 bg-gray-100 rounded-md"
            aria-current="page"
          >
            Review
          </a>
          <a
            href="/stats"
            class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-50 rounded-md"
          >
            Stats
          </a>
        </div>
      </div>
    </nav>

    <!-- Main content -->
    <main class="w-full px-4 py-8 sm:px-6 md:px-8 lg:px-12 xl:px-16 2xl:px-20">
      <!-- Page header -->
      <div class="mb-8">
        <div class="flex justify-between items-center mb-6">
          <div>
            <h1 class="text-3xl font-bold text-gray-900">
              Manual Review Interface
            </h1>
            <p class="text-gray-600 mt-2">
              Review posts flagged by the spam scoring system. Approve quality
              content or reject spam.
            </p>
          </div>
          <div class="flex space-x-4">
            <button
              phx-click="refresh"
              class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
            >
              <i class="fas fa-sync-alt mr-2"></i>Refresh
            </button>
            <button
              phx-click="refresh_blocklists"
              class="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors"
              title="Refresh blocklists from Settings"
            >
              <i class="fas fa-shield-alt mr-2"></i>Refresh Blocklists
            </button>
          </div>
        </div>

        <!-- Stats cards -->
        <div
          class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8 lg:gap-8 lg:mb-10 xl:gap-10 xl:mb-12"
        >
          <div class="stat-card water-wave">
            <div class="flex items-center">
              <div class="flex-shrink-0">
                <i class="fas fa-inbox text-3xl text-indigo-600"></i>
              </div>
              <div class="ml-4">
                <h3 class="text-lg font-semibold text-gray-900">
                  {{ stats.total_posts }}
                </h3>
                <p class="text-gray-500">Total Posts</p>
              </div>
            </div>
          </div>
          <div class="stat-card water-wave">
            <div class="flex items-center">
              <div class="flex-shrink-0">
                <i class="fas fa-eye text-3xl text-yellow-600"></i>
              </div>
              <div class="ml-4">
                <h3 class="text-lg font-semibold text-gray-900">
                  {{ stats.unreviewed_posts }}
                </h3>
                <p class="text-gray-500">Unreviewed</p>
              </div>
            </div>
          </div>
          <div class="stat-card water-wave">
            <div class="flex items-center">
              <div class="flex-shrink-0">
                <i class="fas fa-check-circle text-3xl text-green-600"></i>
              </div>
              <div class="ml-4">
                <h3 class="text-lg font-semibold text-gray-900">
                  {{ stats.approved_posts }}
                </h3>
                <p class="text-gray-500">Approved</p>
              </div>
            </div>
          </div>
          <div class="stat-card water-wave">
            <div class="flex items-center">
              <div class="flex-shrink-0">
                <i class="fas fa-times-circle text-3xl text-red-600"></i>
              </div>
              <div class="ml-4">
                <h3 class="text-lg font-semibold text-gray-900">
                  {{ stats.rejected_posts }}
                </h3>
                <p class="text-gray-500">Rejected</p>
              </div>
            </div>
          </div>
        </div>

        <!-- Filters -->
        <div
          class="bg-white rounded-lg shadow-md p-4 mb-6 lg:p-6 lg:mb-8 xl:p-8 xl:mb-10"
        >
          <div class="flex flex-wrap gap-4 items-center">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">
                Spam Score Range
              </label>
              <div class="flex space-x-2">
                <input
                  type="number"
                  name="min_score"
                  min="0"
                  max="100"
                  placeholder="Min"
                  value="{{ filters.min_score if filters.min_score is not none else '' }}"
                  phx-change="filter_changed"
                  class="w-24 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
                />
                <span class="self-center">to</span>
                <input
                  type="number"
                  name="max_score"
                  min="0"
                  max="100"
                  placeholder="Max"
                  value="{{ filters.max_score if filters.max_score is not none else '' }}"
                  phx-change="filter_changed"
                  class="w-24 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
                />
              </div>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">
                Stream
              </label>
              <select
                name="stream_id"
                phx-change="filter_changed"
                class="w-48 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
              >
                <option value="">All Streams</option>
                {% for stream in streams %}
                <option value="{{ stream.id }}" {% if filters.stream_id and filters.stream_id | string == stream.id | string %}selected{% endif %}>#{{ stream.hashtag }} ({{ stream.instance }})</option>
                {% endfor %}
              </select>
            </div>
            <div class="flex items-end">
              <button
                phx-click="apply_filters"
                class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors"
              >
                Apply Filters
              </button>
              <button
                phx-click="clear_filters"
                class="ml-2 px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors"
              >
                Clear
              </button>
            </div>
          </div>
        </div>

        <!-- Loading indicator -->
        {% if loading %}
        <div class="text-center py-8">
          <div class="loading-spinner mx-auto mb-4"></div>
          <p class="text-gray-500">Loading posts...</p>
        </div>
        {% elif posts %}
        <!-- Posts table -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden w-full">
          <div class="overflow-x-auto lg:overflow-x-visible">
            <table class="w-full divide-y divide-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th scope="col" class="px-3 py-2 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider post-content-cell">Post</th>
                  <th scope="col" class="px-3 py-2 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider author-cell">Author</th>
                  <th scope="col" class="px-3 py-2 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider score-cell">Score</th>
                  <th scope="col" class="px-3 py-2 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider hidden md:table-cell stream-cell">Stream</th>
                  <th scope="col" class="px-3 py-2 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider hidden sm:table-cell engagement-cell">Engagement</th>
                  <th scope="col" class="px-3 py-2 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider actions-cell">Actions</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                {% for post in posts %}
                {% set score = post.spam_score %}
                {% if score >= 75 %}{% set score_class = "score-very-high" %}
                {% elif score >= 50 %}{% set score_class = "score-high" %}
                {% elif score >= 25 %}{% set score_class = "score-medium" %}
                {% else %}{% set score_class = "score-low" %}{% endif %}
                {% set stream = streams_by_id.get(post.stream_id) %}
                <tr id="post-{{ post.id }}" class="hover:bg-gray-50 transition-colors">
                  <td class="px-3 py-3 sm:px-6 sm:py-4 post-content-cell">
                    <div class="text-sm text-gray-900 break-words table-cell-content">
                      <div class="font-medium">Post #{{ post.id }}</div>
                      <div class="text-gray-500 mt-1 mb-2">{{ post.content | striptags | truncate(150, true, '...') }}</div>
                      {% if post.media_attachments %}
                      {% set attachments = post.media_attachments %}
                      {% set count = attachments | length %}
                      {% if count == 1 %}{% set grid_class = "single" %}
                      {% elif count == 2 %}{% set grid_class = "double" %}
                      {% elif count == 3 %}{% set grid_class = "triple" %}
                      {% else %}{% set grid_class = "multiple" %}{% endif %}
                      <div class="media-attachments">
                        <div class="media-grid {{ grid_class }}">
                          {% for att in attachments %}
                          {% if loop.index <= 4 %}
                          <div class="media-item {% if att.type == 'video' or att.type == 'gifv' %}video{% endif %}">
                            {% if att.url %}
                            <a href="{{ att.url }}" target="_blank" rel="noopener">
                              {% if att.preview_url %}
                              <img src="{{ att.preview_url }}" alt="{{ att.description or '' }}" loading="lazy" />
                              {% elif att.type == 'video' or att.type == 'gifv' %}
                              <div class="flex items-center justify-center h-full bg-gray-200 text-gray-500 text-sm">Video</div>
                              {% else %}
                              <div class="flex items-center justify-center h-full bg-gray-200 text-gray-500 text-sm">Media</div>
                              {% endif %}
                            </a>
                            {% endif %}
                            {% if loop.index == 4 and count > 4 %}
                            <span class="media-count">+{{ count - 4 }}</span>
                            {% endif %}
                          </div>
                          {% endif %}
                          {% endfor %}
                        </div>
                      </div>
                      {% endif %}
                    </div>
                  </td>
                  <td class="px-3 py-3 sm:px-6 sm:py-4 author-cell">
                    <div class="flex flex-col items-start space-y-1 sm:flex-row sm:items-center sm:space-x-3 sm:space-y-0">
                      {% if post.author_url %}
                      <a href="{{ post.author_url }}" target="_blank" rel="noopener" class="flex-shrink-0">
                      {% else %}
                      <div class="flex-shrink-0">
                      {% endif %}
                        <div class="avatar-placeholder" title="{{ post.author_display_name or post.author_username or 'Unknown' }}">
                          {{ (post.author_display_name or post.author_username or '?')[0] | upper }}
                        </div>
                      {% if post.author_url %}</a>{% else %}</div>{% endif %}
                      <div class="table-cell-content">
                        <div class="flex flex-col sm:block">
                          {% if post.author_url %}
                          <a href="{{ post.author_url }}" target="_blank" rel="noopener" class="font-medium text-gray-900 hover:text-indigo-600 hover:underline block sm:inline">
                          {% else %}
                          <div class="font-medium text-gray-900 block sm:inline">
                          {% endif %}
                            {{ post.author_display_name or post.author_username or 'Unknown' }}
                          {% if post.author_url %}</a>{% else %}</div>{% endif %}
                          {% if post.author_username %}
                          {% if post.author_url %}
                          <a href="{{ post.author_url }}" target="_blank" rel="noopener" class="text-gray-500 text-sm hover:text-indigo-500 hover:underline block sm:inline sm:ml-1">
                          {% else %}
                          <div class="text-gray-500 text-sm block sm:inline sm:ml-1">
                          {% endif %}
                            @{{ post.author_username }}
                          {% if post.author_url %}</a>{% else %}</div>{% endif %}
                          {% endif %}
                        </div>
                      </div>
                    </div>
                  </td>
                  <td class="px-3 py-3 sm:px-6 sm:py-4 score-cell whitespace-nowrap">
                    <span class="px-2 py-0.5 sm:px-3 sm:py-1 inline-flex text-xs leading-5 font-semibold rounded-full {{ score_class }}">
                      {{ score }}
                    </span>
                  </td>
                  <td class="px-3 py-3 sm:px-6 sm:py-4 text-sm text-gray-500 hidden md:table-cell stream-cell table-cell-content">
                    {% if stream %}
                    #{{ stream.hashtag }} ({{ stream.instance }})
                    {% else %}
                    None
                    {% endif %}
                    {% if post.hashtags %}
                    {% set stream_tag = stream.hashtag | lower if stream else '' %}
                    {% set other_tags = [] %}
                    {% for tag in post.hashtags %}
                    {% if tag and tag.strip() and stream_tag not in tag | lower %}
                    {% set _ = other_tags.append(tag.lstrip('#')) %}
                    {% endif %}
                    {% endfor %}
                    {% if other_tags %}
                    <div class="mt-1">
                      {% for tag in other_tags %}
                      <span class="inline-block px-1.5 py-0.5 text-xs rounded bg-gray-100 text-gray-700 mr-1 mb-1">#{{ tag }}</span>
                      {% endfor %}
                    </div>
                    {% endif %}
                    {% endif %}
                  </td>
                  <td class="px-3 py-3 sm:px-6 sm:py-4 hidden sm:table-cell engagement-cell">
                    <div class="engagement-metrics">
                      <div class="engagement-item engagement-replies" title="Replies">
                        <i class="fas fa-reply"></i>
                        <span class="engagement-count">{{ post.replies or 0 }}</span>
                      </div>
                      <div class="engagement-item engagement-boosts" title="Boosts">
                        <i class="fas fa-retweet"></i>
                        <span class="engagement-count">{{ post.boosts or 0 }}</span>
                      </div>
                      <div class="engagement-item engagement-likes" title="Likes">
                        <i class="fas fa-heart"></i>
                        <span class="engagement-count">{{ post.likes or 0 }}</span>
                      </div>
                    </div>
                  </td>
                  <td class="px-3 py-3 sm:px-6 sm:py-4 text-sm font-medium actions-cell">
                    <div class="flex flex-col gap-1 items-start">
                      <button
                        phx-click="approve_post"
                        phx-value-post_id="{{ post.id }}"
                        class="btn-approve p-1 sm:p-2 rounded-md text-sm font-medium transition-colors w-full sm:w-auto"
                        title="Approve">
                        <i class="fas fa-check"></i>
                      </button>
                      <button
                        phx-click="reject_post"
                        phx-value-post_id="{{ post.id }}"
                        class="btn-reject p-1 sm:p-2 rounded-md text-sm font-medium transition-colors w-full sm:w-auto"
                        title="Reject">
                        <i class="fas fa-times"></i>
                      </button>
                      {% if post.url %}
                      <a href="{{ post.url }}" target="_blank" rel="noopener"
                         class="btn-external p-1 sm:p-2 rounded-md text-sm font-medium transition-colors w-full sm:w-auto text-center"
                         title="View original post">
                        <i class="fas fa-external-link-alt"></i>
                      </a>
                      {% endif %}
                      <button
                        phx-click="open_score_modal"
                        phx-value-post_id="{{ post.id }}"
                        class="btn-score p-1 sm:p-2 rounded-md text-sm font-medium transition-colors w-full sm:w-auto"
                        title="Adjust Score">
                        <i class="fas fa-edit"></i>
                      </button>
                    </div>
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
        {% else %}
        <div class="text-center py-12">
          <i class="fas fa-check-circle text-4xl text-green-300 mb-4"></i>
          <p class="text-gray-500">No posts to review!</p>
          <p class="text-gray-400 text-sm mt-2">
            All posts have been reviewed or no posts match your filters.
          </p>
        </div>
        {% endif %}

        <!-- Manual score modal (hidden by default) -->
        {% if modal_open %}
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50">
          <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
            <div class="px-6 py-4 border-b">
              <h3 class="text-lg font-medium text-gray-900">
                Set Manual Spam Score
              </h3>
            </div>
            <div class="px-6 py-4">
              {% set modal_post = posts | selectattr('id', 'equalto', selected_post_id) | first | default(none) %}
              {% if modal_post %}
              <p class="text-gray-600 mb-4">{{ modal_post.content | striptags | truncate(200, true, '...') }}</p>
              {% endif %}
              <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                  Score (0-100)
                </label>
                <input
                  type="range"
                  name="value"
                  min="0"
                  max="100"
                  value="{{ manual_score if manual_score is not none else 50 }}"
                  phx-change="update_manual_score"
                  class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
                />
                <div class="flex justify-between text-xs text-gray-500 mt-1">
                  <span>0 (Not spam)</span>
                  <span>{{ manual_score if manual_score is not none else 50 }}</span>
                  <span>100 (Spam)</span>
                </div>
              </div>
              <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                  Notes (optional)
                </label>
                <textarea
                  name="notes"
                  rows="3"
                  phx-change="update_manual_score"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
                  placeholder="Add any notes about this review..."
                >{{ reviewer_notes }}</textarea>
              </div>
            </div>
            <div class="px-6 py-4 border-t bg-gray-50 flex justify-end space-x-3">
              <button
                phx-click="close_modal"
                type="button"
                class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors"
              >
                Cancel
              </button>
              <button
                phx-click="save_manual_score"
                type="button"
                class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors"
              >
                Save Score
              </button>
            </div>
          </div>
        </div>
        {% endif %}
      </div>
    </main>


  </body>
</html>
`
