{% extends "portal_base.html" %}

{% block title %}Add Device - OTB Cloud{% endblock %}

{% block portal_content %}
<div class="portal-page-header">
  <div>
    <h1 class="portal-page-title">Add Device</h1>
    <p class="portal-client-name">{{ user_email }}</p>
    <p class="portal-page-subtitle">
      Create a named source for uploads like a laptop, phone, tablet, or workstation.
    </p>
  </div>

  <div class="portal-toolbar" style="display:flex;flex-direction:column;align-items:flex-end;gap:10px;">
    <div style="display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;">
      <a class="portal-btn" href="{{ url_for('main.dashboard') }}">Back to Dashboard</a>
    </div>
  </div>
</div>

{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
    <section style="margin-bottom:22px;">
      {% for category, message in messages %}
        <div class="service-card" style="padding:14px 18px; margin-bottom:10px;">
          <strong>{{ category|capitalize }}:</strong> {{ message }}
        </div>
      {% endfor %}
    </section>
  {% endif %}
{% endwith %}

<section class="services-grid">
  <article class="service-card status-beta" style="max-width:900px;">
    <div class="service-card-header">
      <div>
        <h2>Device Details</h2>
        <p>This creates a device source and its storage folders.</p>
      </div>
      <div>
        <span class="service-badge service-badge-beta">Setup</span>
      </div>
    </div>

    <div class="service-card-actions">
      <form method="post" action="{{ url_for('main.add_device') }}">
        <div style="display:grid;gap:16px;max-width:680px;">
          <div>
            <label for="device_name" style="display:block;margin-bottom:6px;font-weight:700;">Device Name</label>
            <input
              id="device_name"
              name="device_name"
              type="text"
              value="{{ device_name or '' }}"
              placeholder="Example: Main Laptop"
              style="width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.04);color:white;"
              required
            >
          </div>

          <div>
            <label for="device_type" style="display:block;margin-bottom:6px;font-weight:700;">Device Type</label>
            <select
              id="device_type"
              name="device_type"
              style="width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.14);background:#0f1a2b;color:white;"
              required
            >
              <option value="">Select type</option>
              <option value="laptop" {% if device_type == 'laptop' %}selected{% endif %}>Laptop</option>
              <option value="phone" {% if device_type == 'phone' %}selected{% endif %}>Phone</option>
              <option value="tablet" {% if device_type == 'tablet' %}selected{% endif %}>Tablet</option>
              <option value="desktop" {% if device_type == 'desktop' %}selected{% endif %}>Desktop</option>
              <option value="workstation" {% if device_type == 'workstation' %}selected{% endif %}>Workstation</option>
              <option value="other" {% if device_type == 'other' %}selected{% endif %}>Other</option>
            </select>
          </div>

          <div style="display:flex;gap:10px;flex-wrap:wrap;">
            <button class="portal-btn primary" type="submit">Create Device</button>
            <a class="portal-btn" href="{{ url_for('main.dashboard') }}">Cancel</a>
          </div>
        </div>
      </form>
    </div>
  </article>
</section>
{% endblock %}