{% extends "base.html" %}

{% block title %}{% if device %}Edit Device{% else %}New Device{% endif %} – WMT – {{ app_name }}{% endblock %}

{% block page_title %}{% if device %}Edit Device{% else %}New Device{% endif %}{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-7">
    <div class="card">
      <div class="card-header">
        <i class="fas fa-desktop me-2"></i>
        {% if device %}
          Edit: <code>{{ device.mac_address }}</code>
        {% else %}
          Register New WMT Device
        {% endif %}
      </div>
      <div class="card-body">
        <form method="post">

          <div class="mb-3">
            <label class="form-label fw-semibold">MAC Address <span class="text-danger">*</span>
              <small class="text-muted fw-normal">(unique identifier, e.g. b8:27:eb:aa:bb:cc)</small>
            </label>
            {% if device %}
              <input type="text" class="form-control" value="{{ device.mac_address }}" readonly disabled>
              <small class="text-muted">MAC cannot be changed after registration.</small>
            {% else %}
              <input type="text" name="mac_address" class="form-control"
                     placeholder="b8:27:eb:aa:bb:cc" required
                     pattern="^([0-9a-fA-F]{2}:){5}[0-9a-fA-F]{2}$">
            {% endif %}
          </div>

          <div class="mb-3">
            <label class="form-label fw-semibold">Work Place
              <small class="text-muted fw-normal">(table / workstation identifier)</small>
            </label>
            <input type="text" name="device_name" class="form-control"
                   value="{{ device.device_name or '' if device else '' }}"
                   placeholder="Masa-01">
          </div>

          <div class="row g-3 mb-3">
            <div class="col-md-6">
              <label class="form-label fw-semibold">Hostname</label>
              <input type="text" name="hostname" class="form-control"
                     value="{{ device.hostname or '' if device else '' }}"
                     placeholder="rpi-masa01">
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">IP Address</label>
              <input type="text" name="device_ip" class="form-control"
                     value="{{ device.device_ip or '' if device else '' }}"
                     placeholder="192.168.1.100">
            </div>
          </div>

          <div class="mb-4">
            <label class="form-label fw-semibold">Notes</label>
            <textarea name="notes" class="form-control" rows="2">{{ device.notes or '' if device else '' }}</textarea>
          </div>

          <div class="mb-4">
            <label class="form-label fw-semibold">Card Presence
              <small class="text-muted fw-normal">(enable = RFID card reader present; disable = no card reader)</small>
            </label>
            <select name="card_presence" class="form-select">
              <option value="enable" {% if not device or device.card_presence != 'disable' %}selected{% endif %}>enable</option>
              <option value="disable" {% if device and device.card_presence == 'disable' %}selected{% endif %}>disable</option>
            </select>
          </div>

          <hr>
          <h6 class="text-muted mb-1">Chrome Launch – Production URL Override</h6>
          <p class="text-muted small mb-3">
            Leave blank to use the global default URL configured in
            <a href="{{ url_for('wmt_web.settings') }}" target="_blank">WMT Settings</a>.
            Fill in only if this device needs a different production page.
          </p>
          <div class="mb-3">
            <label class="form-label fw-semibold">Custom Production URL
              <small class="text-muted fw-normal">(device-specific override)</small>
            </label>
            <input type="url" name="custom_chrome_url" class="form-control"
                   value="{{ device.custom_chrome_url or '' if device else '' }}"
                   placeholder="Leave blank to use global default">
            {% if device and device.custom_chrome_url %}
            <div class="form-text text-warning">
              <i class="fas fa-exclamation-triangle me-1"></i>
              This device uses a custom URL instead of the global default.
              Clear the field to revert to the global setting.
            </div>
            {% else %}
            <div class="form-text text-success">
              <i class="fas fa-check-circle me-1"></i>
              Using global default production URL.
            </div>
            {% endif %}
          </div>

          {% if device %}
          <div class="alert alert-light border small mb-4">
            <strong>Last seen:</strong>
            {{ device.last_seen | local_dt('%Y-%m-%d %H:%M:%S') if device.last_seen else 'Never' }}<br>
            <strong>Config updated:</strong>
            {{ device.config_updated_at | local_dt('%Y-%m-%d %H:%M:%S') if device.config_updated_at else '—' }}<br>
            <strong>Info reviewed at:</strong>
            <span class="{% if device.info_reviewed_at and device.info_reviewed_at.year > 1970 %}text-success{% else %}text-muted{% endif %}">
              {{ device.info_reviewed_at | local_dt('%Y-%m-%d %H:%M:%S') if (device.info_reviewed_at and device.info_reviewed_at.year > 1970) else 'Never reviewed' }}
            </span>
            <br><small class="text-muted">Updated automatically when you save this form, accept or reject a device request.</small>
          </div>
          {% endif %}

          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary">
              <i class="fas fa-save me-1"></i> {% if device %}Save Changes{% else %}Register Device{% endif %}
            </button>
            <a href="{{ url_for('wmt_web.devices') }}" class="btn btn-outline-secondary">Cancel</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}