{{ define "content" }}
<div class="flex flex-col min-h-screen bg-gray-100">
  <!-- Optional Header -->
  <header class="bg-white shadow p-4">
    <h1 class="text-xl font-bold">Community</h1>
  </header>

  <!-- Scrollable Posts -->
  <main class="flex-1 overflow-y-auto px-2 py-4 max-w-2xl mx-auto space-y-4">
    <!-- Posts Feed -->
    {{range .Posts}}
    <article class="bg-white border-b border-gray-200">
      <!-- Post Header -->
      <div class="flex items-center px-6 py-4">
        <div class="flex-shrink-0">
          <div
            class="w-10 h-10 bg-blue-500 flex items-center justify-center text-white font-semibold"
          >
            {{slice .AuthorName 0 1}}
          </div>
        </div>
        <div class="ml-4">
          <p class="text-sm font-semibold text-gray-900">{{.AuthorName}}</p>
          <p class="text-xs text-gray-500">
            {{.CreatedAt.Format "Jan 2, 2006"}}
          </p>
        </div>
      </div>

      <!-- Post Image -->
      {{if .ImageURL}}
      <div class="w-full">
        <img
          src="{{.ImageURL}}"
          alt="Post image"
          class="w-full max-h-96 object-cover"
          onerror="this.parentElement.style.display='none'"
        />
      </div>
      {{end}}

      <!-- Post Actions -->
      <div class="px-6 py-3">
        <div class="flex items-center space-x-6">
          <button
            class="reaction-btn flex items-center space-x-2 text-gray-600 hover:text-blue-500 transition-colors"
            data-post-id="{{.PostID}}"
            data-reaction="like"
          >
            <svg
              class="w-6 h-6"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V18m-7-8a2 2 0 01-2-2V7a2 2 0 012-2h3.764a2 2 0 011.789 1.106L14 8v2m-7-8V5a2 2 0 012-2h1m-5 10h3m4 3H8"
              ></path>
            </svg>
            <span class="text-sm font-medium like-count">0</span>
          </button>
          <button
            class="reaction-btn flex items-center space-x-2 text-gray-600 hover:text-red-500 transition-colors"
            data-post-id="{{.PostID}}"
            data-reaction="dislike"
          >
            <svg
              class="w-6 h-6"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018c.163 0 .326.02.485.06L17 4m-7 10v-8m7 8a2 2 0 002 2v1a2 2 0 01-2 2h-3.764a2 2 0 01-1.789-1.106L10 16v-2m7 8V19a2 2 0 00-2-2h-1m5-10H12m-4-3h4"
              ></path>
            </svg>
            <span class="text-sm font-medium dislike-count">0</span>
          </button>
        </div>
      </div>

      <!-- Post Content -->
      {{if .Content}}
      <div class="px-6 pb-4">
        <p class="text-gray-900 leading-relaxed">
          <span class="font-semibold">{{.AuthorName}}</span> {{.Content}}
        </p>
      </div>
      {{end}}
    </article>
    {{else}}
    <div class="bg-white p-12 text-center">
      <div class="max-w-sm mx-auto">
        <svg
          class="w-16 h-16 mx-auto text-gray-300 mb-4"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
          ></path>
        </svg>
        <h3 class="text-lg font-medium text-gray-900 mb-2">No posts yet</h3>
        <p class="text-gray-500">
          Be the first to share something with the community!
        </p>
      </div>
    </div>
    {{end}}
  </div>
</div>
{{ end }}