{% extends 'base.html' %}
{% load i18n static humanize %}
{% load custom_filters %}
{% block title %}{{ _("Opportunities") }}{% endblock title %}
{% block content %}
  <div class="row g-3 mt-4">
    <div class="col-12">
      <h2 class="mb-3">{{ _("Opportunities") }}</h2>
    </div>
    <div class="col-12">
      <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
        <!-- Filter Controls -->
        <div class="d-flex flex-column flex-lg-row align-items-start align-items-lg-center gap-3 w-100" id="filter-container">
          <!-- Search Input - Wider and properly aligned -->
          <div class="position-relative flex-grow-1" style="min-width: 300px;">
            <span class="fas fa-search position-absolute top-50 translate-middle-y ms-3 text-body-tertiary"></span>
            <input
              class="form-control ps-6"
              type="text"
              placeholder="{% trans 'Search opportunities...' %}"
              name="search"
              hx-get="{% url 'opportunity_list' request.dealer.slug %}"
              hx-trigger="keyup changed delay:500ms"
              hx-target="#opportunities-grid"
              hx-select="#opportunities-grid"
              hx-include="#filter-container select"
              hx-swap="outerHTML"
              style="width: 100%;"
            >
          </div>

          <!-- Filter Dropdowns - Aligned in a row -->
          <div class="d-flex flex-column flex-sm-row gap-3 w-100" style="max-width: 500px;">
            <!-- Stage Filter -->
            <div class="flex-grow-1">
              <select
                class="form-select"
                name="stage"
                hx-get="{% url 'opportunity_list' request.dealer.slug %}"
                hx-trigger="change"
                hx-target="#opportunities-grid"
                hx-select="#opportunities-grid"
                hx-swap="outerHTML"
                hx-include="#filter-container input, #filter-container select"
              >
                <option value="">{% trans "All Stages" %}</option>
                {% for value, label in stage_choices %}
                  <option value="{{ value }}" {% if request.GET.stage == value %}selected{% endif %}>
                    {{ label }}
                  </option>
                {% endfor %}
              </select>
            </div>

            <!-- Sort Filter -->
            <div class="flex-grow-1">
              <select
                class="form-select"
                name="sort"
                hx-get="{% url 'opportunity_list' request.dealer.slug %}"
                hx-trigger="change"
                hx-target="#opportunities-grid"
                hx-select="#opportunities-grid"
                hx-swap="outerHTML"
                hx-include="#filter-container input, #filter-container select"
              >
                <option value="newest" {% if request.GET.sort == 'newest' %}selected{% endif %}>
                  {% trans "Newest First" %}
                </option>
                <option value="highest" {% if request.GET.sort == 'highest' %}selected{% endif %}>
                  {% trans "Highest Value" %}
                </option>
                <option value="closing" {% if request.GET.sort == 'closing' %}selected{% endif %}>
                  {% trans "Earliest Close Date" %}
                </option>
              </select>
            </div>
          </div>
        </div>

        <div class="d-flex justify-content-end">
          <a class="btn btn-phoenix-primary btn-sm" href="{% url 'opportunity_create' request.dealer.slug %}">
            <span class="fas fa-plus me-2"></span>{{ _("Add Opportunity") }}
          </a>
        </div>
      </div>
    </div>
  </div>

  <div id="opportunities-grid" class="row g-4 px-2 px-lg-4 mt-1">
    {% include 'crm/opportunities/partials/opportunity_grid.html' %}
  </div>
  {% if page_obj.paginator.num_pages > 1 %}

    <div class="d-flex justify-content-end mt-3">

      <div class="d-flex">
        {% include 'partials/pagination.html'%}
      </div>

    </div>
  {% endif %}
{% endblock %}