{% extends "base.html" %}

{% block title %}WMT Devices – {{ app_name }}{% endblock %}

{% block page_title %}WMT Devices{% endblock %}

{% block content %}
<div class="mb-3 d-flex justify-content-between align-items-center">
  <p class="text-muted mb-0">{{ devices | length }} device(s) registered.</p>
  <div class="d-flex gap-2">
    <a href="{{ url_for('wmt_web.devices_export_csv') }}" class="btn btn-outline-secondary">
      <i class="fas fa-file-csv me-1"></i> Export CSV
    </a>
    <a href="{{ url_for('wmt_web.device_new') }}" class="btn btn-success">
      <i class="fas fa-plus me-1"></i> New Device
    </a>
  </div>
</div>

<div class="card">
  <div class="card-body p-0">
    {% if devices %}
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th>Work Place</th>
            <th>MAC Address</th>
            <th>Hostname</th>
            <th>IP Address</th>
            <th>Card Presence</th>
            <th>Last Seen</th>
            <th>Config Updated</th>
            <th class="text-end">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for d in devices %}
          <tr>
            <td><strong>{{ d.device_name or '—' }}</strong></td>
            <td><code>{{ d.mac_address }}</code></td>
            <td>{{ d.hostname or '—' }}</td>
            <td>{{ d.device_ip or '—' }}</td>
            <td>
              {% if d.card_presence == 'enable' %}
                <span class="badge bg-success">enable</span>
              {% else %}
                <span class="badge bg-secondary">disable</span>
              {% endif %}
            </td>
            <td class="text-muted small">
              {{ d.last_seen | local_dt if d.last_seen else 'Never' }}
            </td>
            <td class="text-muted small">
              {{ d.config_updated_at | local_dt if d.config_updated_at else '—' }}
            </td>
            <td class="text-end">
              <a href="{{ url_for('wmt_web.device_edit', device_id=d.id) }}"
                 class="btn btn-sm btn-outline-primary">
                <i class="fas fa-edit"></i> Edit
              </a>
              <form method="post" action="{{ url_for('wmt_web.device_delete', device_id=d.id) }}"
                    class="d-inline"
                    onsubmit="return confirm('Delete device {{ d.mac_address }}?')">
                <button type="submit" class="btn btn-sm btn-outline-danger">
                  <i class="fas fa-trash"></i>
                </button>
              </form>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <div class="text-center text-muted py-5">
      <i class="fas fa-desktop fa-3x mb-3 opacity-25"></i>
      <p>No devices registered yet. <a href="{{ url_for('wmt_web.device_new') }}">Add the first one</a>.</p>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}