{% extends "base.html" %}

{% block title %}Phone Book · Delphi Database{% endblock %}

{% block content %}
<div class="row g-3">
  <div class="col-12 d-flex align-items-center">
    <a class="btn btn-sm btn-outline-secondary me-2" href="/rolodex">
      <i class="bi bi-arrow-left"></i> Back
    </a>
    <h2 class="mb-0">Phone Book</h2>
    <div class="ms-auto d-flex gap-2">
      <a class="btn btn-outline-secondary btn-sm" href="/reports/phone-book?format=csv{% for id in client_ids %}&client_ids={{ id }}{% endfor %}{% if q %}&q={{ q | urlencode }}{% endif %}">
        <i class="bi bi-filetype-csv me-1"></i>Download CSV
      </a>
    </div>
  </div>

  <div class="col-12">
    <div class="table-responsive">
      <table class="table table-sm align-middle">
        <thead class="table-light">
          <tr>
            <th style="width: 220px;">Name</th>
            <th>Company</th>
            <th style="width: 160px;">Phone Type</th>
            <th style="width: 220px;">Phone Number</th>
          </tr>
        </thead>
        <tbody>
          {% if clients and clients|length > 0 %}
            {% for c in clients %}
              {% if c.phones and c.phones|length > 0 %}
                {% for p in c.phones %}
                <tr>
                  <td><span class="fw-semibold">{{ c.last_name or '' }}, {{ c.first_name or '' }}</span></td>
                  <td>{{ c.company or '' }}</td>
                  <td>{{ p.phone_type or '' }}</td>
                  <td>{{ p.phone_number or '' }}</td>
                </tr>
                {% endfor %}
              {% else %}
                <tr>
                  <td><span class="fw-semibold">{{ c.last_name or '' }}, {{ c.first_name or '' }}</span></td>
                  <td>{{ c.company or '' }}</td>
                  <td class="text-muted">—</td>
                  <td class="text-muted">—</td>
                </tr>
              {% endif %}
            {% endfor %}
          {% else %}
            <tr><td colspan="4" class="text-center text-muted py-4">No data.</td></tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}