{% extends "portal_base.html" %}

{% block title %}Add Device{% endblock %}

{% block portal_content %}
<div class="portal-page-header">
  <div>
    <h1 class="portal-page-title">Add Device</h1>
    <p class="portal-page-subtitle">Register a new upload source.</p>
  </div>

  <div class="portal-toolbar">
    <a class="portal-btn" href="{{ url_for('main.dashboard') }}">Back</a>
  </div>
</div>

<form method="post" class="service-card" style="max-width:500px;">
  <div style="margin-bottom:16px;">
    <label>Device Name</label><br>
    <input type="text" name="device_name" value="{{ device_name or '' }}" required style="width:100%;padding:10px;border-radius:8px;">
  </div>

  <div style="margin-bottom:16px;">
    <label>Device Type</label><br>
    <select name="device_type" required class="otb-select">
      <option value="">Select type</option>
      <option value="laptop">Laptop</option>
      <option value="phone">Phone</option>
      <option value="tablet">Tablet</option>
      <option value="workpc">Work PC</option>
      <option value="homepc">Home PC</option>
      <option value="other">Other</option>
    </select>
  </div>

  <button class="portal-btn primary" type="submit">Create Device</button>
</form>

<style>
.otb-select {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  background: rgba(8, 18, 37, 0.9);
  color: #e8eefc;
  border: 1px solid rgba(255,255,255,0.15);
}

/* Fix dropdown list colors (some browsers) */
.otb-select option {
  background: #081225;
  color: #e8eefc;
}
</style>
{% endblock %}