{% extends "portal_base.html" %}

{% block title %}Deleted Files - OTB Cloud{% endblock %}

{% block portal_content %}
<div class="portal-page-header">
  <div>
    <h1 class="portal-page-title">Deleted Files</h1>
    <p class="portal-client-name">{{ user_email }}</p>
    <p class="portal-page-subtitle">
      Deleted files are retained for up to 24 hours unless you hard-delete them immediately.
    </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 %}

{% if files %}
<section class="services-grid" style="grid-template-columns: 1fr;">
  <article class="service-card status-beta">
    <div class="service-card-header">
      <div>
        <h2>Deleted Files</h2>
        <p>Files here are pending retention expiry or hard delete.</p>
      </div>
      <div>
        <span class="service-badge service-badge-beta">{{ files|length }} items</span>
      </div>
    </div>

    <div class="service-card-actions" style="overflow-x:auto;">
      <table style="width:100%;border-collapse:collapse;">
        <thead>
          <tr>
            <th style="text-align:left;padding:10px 8px;border-bottom:1px solid rgba(255,255,255,0.12);">Name</th>
            <th style="text-align:left;padding:10px 8px;border-bottom:1px solid rgba(255,255,255,0.12);">Device</th>
            <th style="text-align:left;padding:10px 8px;border-bottom:1px solid rgba(255,255,255,0.12);">Size</th>
            <th style="text-align:left;padding:10px 8px;border-bottom:1px solid rgba(255,255,255,0.12);">Deleted At</th>
            <th style="text-align:left;padding:10px 8px;border-bottom:1px solid rgba(255,255,255,0.12);">Action</th>
          </tr>
        </thead>
        <tbody>
          {% for file in files %}
          <tr>
            <td style="padding:12px 8px;border-bottom:1px solid rgba(255,255,255,0.08);vertical-align:top;">
              <strong>{{ file.original_filename }}</strong><br>
              <span style="opacity:0.75;font-size:0.9rem;">{{ file.relative_path }}</span>
            </td>
            <td style="padding:12px 8px;border-bottom:1px solid rgba(255,255,255,0.08);vertical-align:top;">
              {{ file.device_name or 'Unknown' }}<br>
              <span style="opacity:0.75;font-size:0.9rem;">{{ file.device_type or '' }}</span>
            </td>
            <td style="padding:12px 8px;border-bottom:1px solid rgba(255,255,255,0.08);vertical-align:top;">
              {{ "{:,}".format(file.size_bytes or 0) }} bytes
            </td>
            <td style="padding:12px 8px;border-bottom:1px solid rgba(255,255,255,0.08);vertical-align:top;">
              {{ file.deleted_at }}
            </td>
            <td style="padding:12px 8px;border-bottom:1px solid rgba(255,255,255,0.08);vertical-align:top;">
              <form method="post" action="{{ url_for('main.hard_delete_file', file_id=file.id) }}">
                <button class="portal-btn" type="submit" onclick="return confirm('Permanently delete {{ file.original_filename|e }} now? This cannot be undone.');">Hard Delete</button>
              </form>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </article>
</section>
{% else %}
<section class="services-grid">
  <article class="service-card status-beta">
    <div class="service-card-header">
      <div>
        <h2>No deleted files</h2>
        <p>There are currently no files in the deleted area.</p>
      </div>
      <div>
        <span class="service-badge service-badge-beta">Clear</span>
      </div>
    </div>
  </article>
</section>
{% endif %}
{% endblock %}