{% extends "tenant/layouts/base.html" %}
{% block title %}Locations{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
  <h4 class="fw-bold mb-0"><i class="bi bi-geo-alt me-2"></i>Locations</h4>
  <a href="{{ url_for('locations.create') }}" class="btn btn-primary btn-sm">
    <i class="bi bi-plus-lg me-1"></i>New Location
  </a>
</div>
<div class="row g-3">
  {% for loc in locations %}
  <div class="col-md-6 col-lg-4">
    <div class="card shadow-sm h-100 {{ '' if loc.is_active else 'opacity-50' }}">
      <div class="card-header d-flex justify-content-between align-items-center">
        <strong>{{ loc.name }}</strong>
        <div>
          {% if loc.is_primary %}<span class="badge bg-primary me-1">Primary</span>{% endif %}
          <span class="badge {{ 'bg-success' if loc.is_active else 'bg-secondary' }}">{{ 'Active' if loc.is_active else 'Inactive' }}</span>
        </div>
      </div>
      <div class="card-body small text-muted">
        {% if loc.address %}<p class="mb-1"><i class="bi bi-map me-1"></i>{{ loc.address }}</p>{% endif %}
        {% if loc.phone %}<p class="mb-1"><i class="bi bi-telephone me-1"></i>{{ loc.phone }}</p>{% endif %}
        {% if loc.email %}<p class="mb-1"><i class="bi bi-envelope me-1"></i>{{ loc.email }}</p>{% endif %}
        <p class="mb-0"><i class="bi bi-clock me-1"></i>{{ loc.timezone }}</p>
      </div>
      <div class="card-footer d-flex gap-2">
        <a href="{{ url_for('locations.edit', location_id=loc.id) }}" class="btn btn-outline-secondary btn-sm">Edit</a>
        {% if not loc.is_primary %}
        <form method="POST" action="{{ url_for('locations.set_primary', location_id=loc.id) }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button class="btn btn-outline-primary btn-sm">Set Primary</button>
        </form>
        {% endif %}
        <a href="{{ url_for('locations.switch', location_id=loc.id) }}" class="btn btn-outline-success btn-sm ms-auto">Switch</a>
      </div>
    </div>
  </div>
  {% else %}
  <div class="col"><p class="text-muted">No locations found.</p></div>
  {% endfor %}
</div>
{% endblock %}