{% extends 'public_frontend/base.html' %}
{% block title %}Home{% endblock %}
{% block content %}
<div class="grid gap-8">
  <section class="bg-white rounded shadow p-6">
    <h2 class="text-xl font-semibold mb-2">Welcome{% if org %} to {{ org.name }}{% endif %}</h2>
    <p class="text-gray-600">We help you manage recycling operations: pickups, weighing, invoices, and public listings.</p>
    <div class="mt-4 flex gap-3">
      <a href="{% url 'public_frontend:pickup_request' %}" class="btn-primary">Request Pickup</a>
      <a href="{% url 'public_frontend:listings_list' %}" class="btn-outline">Browse Listings</a>
    </div>
  </section>

  <section class="bg-white rounded shadow p-6">
    <div class="flex items-center justify-between mb-3">
      <h3 class="font-semibold">Latest Blog</h3>
      <a href="{% url 'public_frontend:blog_list' %}" class="text-blue-700 hover:underline">View all</a>
    </div>
    <div class="grid md:grid-cols-3 gap-4">
      {% for p in posts %}
        <a href="{% url 'public_frontend:blog_detail' p.slug %}" class="block p-4 border rounded hover:bg-gray-50">
          <div class="text-sm text-gray-500">{{ p.published_at|date:'M j, Y' }}</div>
          <div class="font-medium">{{ p.title }}</div>
          <div class="text-sm text-gray-600 line-clamp-2">{{ p.excerpt|default:p.content|striptags|truncatechars:120 }}</div>
        </a>
      {% empty %}
        <div class="text-gray-500">No posts yet.</div>
      {% endfor %}
    </div>
  </section>

  <section class="bg-white rounded shadow p-6">
    <div class="flex items-center justify-between mb-3">
      <h3 class="font-semibold">Open Listings</h3>
      <a href="{% url 'public_frontend:listings_list' %}" class="text-blue-700 hover:underline">Browse</a>
    </div>
    <div class="grid md:grid-cols-3 gap-4">
      {% for l in listings %}
        <a href="{% url 'public_frontend:listing_detail' l.id %}" class="block p-4 border rounded hover:bg-gray-50">
          <div class="text-sm text-gray-500">Ends {{ l.ends_at|default:'—' }}</div>
          <div class="font-medium">{{ l.title }}</div>
          <div class="text-sm text-gray-600 line-clamp-2">{{ l.description|truncatechars:120 }}</div>
        </a>
      {% empty %}
        <div class="text-gray-500">No public listings.</div>
      {% endfor %}
    </div>
  </section>
</div>

<style>
.btn-primary{background:#1d4ed8;color:white;padding:.5rem .75rem;border-radius:.375rem}
.btn-outline{border:1px solid #cbd5e1;padding:.5rem .75rem;border-radius:.375rem}
</style>
{% endblock %}

