{% extends 'base.html' %}

{% block content %}
<div class="container py-4">
  <div class="row mb-4">
    <div class="col-lg-8">
      <h1>Discover Celebrities & Fans</h1>
      <p class="text-muted">Browse discoverable profiles using location, interests, and verification filters.</p>
    </div>
  </div>

  <div class="row mb-4">
    <div class="col-lg-4">
      <div class="card p-3 mb-3">
        <h5>Search filters</h5>
        <form method="get">
          {% csrf_token %}
          <div class="mb-3">
            {{ form.keyword.label_tag }}
            {{ form.keyword }}
          </div>
          <div class="mb-3">
            {{ form.city.label_tag }}
            {{ form.city }}
          </div>
          <div class="mb-3">
            {{ form.country.label_tag }}
            {{ form.country }}
          </div>
          <div class="mb-3">
            {{ form.interest.label_tag }}
            {{ form.interest }}
          </div>
          <div class="mb-3">
            {{ form.category.label_tag }}
            {{ form.category }}
          </div>
          <div class="form-check mb-3">
            {{ form.verified_only }}
            {{ form.verified_only.label_tag }}
          </div>
          <button class="btn btn-primary w-100" type="submit">Apply filters</button>
      </div>
    </div>
    <div class="col-lg-8">
      {% if profiles %}
        <div class="list-group">
          {% for profile in profiles %}
            <a href="{% url 'core:discover_detail' profile.user.username %}" class="list-group-item list-group-item-action">
              <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">{{ profile.display_name|default:profile.user.username }}</h5>
                <small>{{ profile.city }}, {{ profile.country }}</small>
              </div>
              <p class="mb-1 text-truncate">{{ profile.headline|default:profile.bio|truncatechars:120 }}</p>
              <small>
                  <div class="mb-2">
                    {% if profile.media_count %}
                      <span class="badge bg-secondary me-1">{{ profile.media_count }} media</span>
                    {% endif %}
                    {% if profile.user.is_verified %}
                      <span class="badge bg-success">Verified</span>
                    {% endif %}
                  </div>
                {% if profile.user.is_verified %}
                  <span class="badge bg-success">Verified</span>
                {% endif %}
                {{ profile.visibility|title }}
              </small>
            </a>
          {% endfor %}
        </div>
      {% else %}
        <div class="alert alert-info">No discoverable profiles matched your filters.</div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}