{% extends "portal_base.html" %}

{% block title %}OTB Cloud Dashboard{% endblock %}

{% block portal_content %}
<div class="portal-page-header">
  <div>
    <h1 class="portal-page-title">OTB Cloud Dashboard</h1>
    <p class="portal-client-name">{{ user_email }}</p>
    <p class="portal-page-subtitle">
      Secure backup and storage dashboard for your account.
    </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 primary" href="{{ url_for('main.add_device') }}">Add Device</a>
      <a class="portal-btn" href="https://otb-billing.outsidethebox.top/portal/services">Back to Services</a>
      <a class="portal-btn" href="/auth/logout">Logout</a>
    </div>

    <div style="text-align:right;font-size:14px;opacity:0.95;">
      <div>Logged in as:
           <strong>{{ user_email }}</strong></div>
      <div>Tenant slug:
           <strong>{{ tenant_slug }}</strong></div>
    </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 %}

{% if devices %}
<section class="services-grid">
  <article class="service-card status-beta">
    <div class="service-card-header">
      <div>
        <h2>Devices</h2>
        <p>Registered source locations for uploaded data.</p>
      </div>
      <div>
        <span class="service-badge service-badge-beta">Active</span>
      </div>
    </div>

    <div class="service-card-actions">
      <ul style="padding-left:18px; margin:0; list-style:disc;">
        {% for device in devices %}
          <li style="margin-bottom:18px;">
            <strong>{{ device.device_name }}</strong>
            <span style="opacity:0.85;">({{ device.device_type }})</span><br>
            <span style="opacity:0.75;">{{ device.relative_path }}</span><br>
            <form method="post" action="{{ url_for('main.delete_device', device_id=device.id) }}" style="margin-top:10px;">
              <button class="portal-btn" type="submit" onclick="return confirm('Remove device {{ device.device_name|e }}? This only works if no files are linked to it.');">Remove Device</button>
            </form>
          </li>
        {% endfor %}
      </ul>
    </div>
  </article>

  <article class="service-card status-beta">
    <div class="service-card-header">
      <div>
        <h2>Current scope</h2>
        <p>OTB Cloud is now operating inside the branded OTB portal shell.</p>
      </div>
      <div>
        <span class="service-badge service-badge-beta">In Progress</span>
      </div>
    </div>

    <div class="service-card-actions">
      <p style="margin:0;">
        Next steps are the searchable file library, bulk upload endpoints, zip export, and media processing jobs.
      </p>
    </div>
  </article>
</section>
{% else %}
<section class="services-grid">
  <article class="service-card status-beta">
    <div class="service-card-header">
      <div>
        <h2>No devices connected yet</h2>
        <p>Create your first device source before uploading files.</p>
      </div>
      <div>
        <span class="service-badge service-badge-beta">Ready</span>
      </div>
    </div>

    <div class="service-card-actions">
      <a class="portal-btn primary" href="{{ url_for('main.add_device') }}">Add Device</a>
    </div>
  </article>

  <article class="service-card status-beta">
    <div class="service-card-header">
      <div>
        <h2>Current scope</h2>
        <p>OTB Cloud is ready for user-created devices.</p>
      </div>
      <div>
        <span class="service-badge service-badge-beta">In Progress</span>
      </div>
    </div>

    <div class="service-card-actions">
      <p style="margin:0;">
        After adding a device, the next phase is browser upload, file library browsing, and export tools.
      </p>
    </div>
  </article>
</section>
{% endif %}
{% endblock %}