{% extends "layout.html" %}
{% block content %}

<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

<style>
/* Small, page-specific responsive tweaks (safe to keep) */
.posts-container{
  max-width:1200px;
  margin:18px auto;
  padding:0 16px;
}

/* responsive grid: auto-fit columns, each at least 320px wide */
.posts-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}

/* each post card is a flexible grid: image column (if present) + content */
.post-card{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px;
  min-height: 120px;
}

/* if no image, make content span full width */
.post-card.no-image{
  grid-template-columns: 1fr;
}

/* thumbnail styling */
.post-card img{
  width:100%;
  height:120px;
  object-fit:cover;
  border-radius:8px;
  display:block;
  border:1px solid rgba(255,255,255,0.03);
}

/* small adjustments for tighter screens */
@media (max-width:640px){
  .post-card{ grid-template-columns: 1fr; }
  .post-card img{ height:200px; }
}
</style>

<div class="posts-container">

  <!-- Search -->
  <form method="GET" action="{{ url_for('index') }}" style="display:flex; gap:10px; margin-bottom:14px;">
    <input name="q" placeholder="Search posts..." value="{{ q|default('') }}" style="flex:1; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.03); background:rgba(255,255,255,0.02); color:inherit;">
    <button class="btn" type="submit" style="min-width:100px;">Search</button>
  </form>

  <h2 style="margin:0 0 12px 0">Posts</h2>

  <div class="posts-grid">
    {% for p in posts %}
      {# determine if image exists to add no-image class #}
      <article class="card post-card {% if not p['image_filename'] %}no-image{% endif %}">
        {% if p['image_filename'] %}
          <div>
            <a href="{{ url_for('view_post', pid=p['id']) }}">
              <img src="{{ url_for('uploaded_file', filename=p['image_filename']) }}" alt="img">
            </a>
          </div>
        {% endif %}

        <div>
          <h3 style="margin:0 0 6px 0; font-size:18px;">
            <a href="{{ url_for('view_post', pid=p['id']) }}" style="color:inherit; text-decoration:none;">
              {{ p['title'] or 'Untitled' }}
            </a>
          </h3>

          <div style="display:flex; gap:8px; align-items:center; margin-bottom:8px;">
            <span class="label-muted">By {{ p['author'] or 'unknown' }}</span>
            {% if p['author'] and p['author'] == session.get('username') %}
              <span class="badge">you</span>
            {% endif %}
          </div>

          <p style="margin:0 0 10px 0; color:var(--muted);">
            {% if p['content'] %}
              {{ (p['content'][:200] + '...') if p['content']|length > 200 else p['content'] }}
            {% else %}
              <span class="label-muted">No content</span>
            {% endif %}
          </p>

          <div style="display:flex; gap:10px; align-items:center; margin-top:8px;">
            <a class="btn" href="{{ url_for('view_post', pid=p['id']) }}" style="padding:8px 12px; font-size:14px;">Read</a>
            <span class="label-muted" style="font-size:13px;">Post ID: {{ p['id'] }}</span>
          </div>
        </div>
      </article>
    {% else %}
      <div class="card" style="text-align:center; padding:24px;">
        <p style="margin:0; color:var(--muted);">No posts yet.</p>
      </div>
    {% endfor %}
  </div>

</div>

<script>
  (function(){
    const q = document.querySelector('input[name="q"]');
    if (q) q.focus();
  })();
</script>

{% endblock %}