{#
  OTS Signage Modern Theme - Media Library Page Override
  Two-column layout with folder panel on left, media grid on right
#}
{% extends "authed.twig" %}

{% block pageTitle %}Media Library{% endblock %}

{% block content %}
<div class="ots-theme two-column-layout">
  <aside class="left-panel">
    <div class="panel-header">
      <h3>Folders</h3>
      <button class="btn-icon-sm" aria-label="New folder">
        <span>+</span>
      </button>
    </div>
    <div class="folder-tree">
      <div class="folder-item active">
        <span class="folder-icon">📁</span>
        <span class="folder-name">All Files</span>
      </div>
      <div class="folder-item">
        <span class="folder-icon">📂</span>
        <span class="folder-name">Root Folder</span>
      </div>
      <div class="folder-item">
        <span class="folder-icon">🖼</span>
        <span class="folder-name">Images</span>
      </div>
      <div class="folder-item">
        <span class="folder-icon">🎬</span>
        <span class="folder-name">Videos</span>
      </div>
    </div>
  </aside>

  <main class="content-panel">
    <div class="page-header">
      <h1>Media Library</h1>
      <p class="text-muted">Upload and manage media files for your displays</p>
    </div>

    <div class="content-toolbar">
      <input type="search" placeholder="Search media…" class="form-control search-field" />
      <div class="toolbar-actions">
        <button class="btn btn-outline">Upload</button>
        <a href="{{ baseUrl }}/library/add" class="btn btn-primary">Add Media</a>
      </div>
    </div>

    <div class="stat-row">
      <div class="stat-box">
        <div class="stat-label">Files</div>
        <div class="stat-value">0</div>
      </div>
      <div class="stat-box">
        <div class="stat-label">Storage Used</div>
        <div class="stat-value">0 MB</div>
      </div>
    </div>

    <div class="media-grid">
      <div class="empty-state">
        <div class="empty-icon">🎞</div>
        <h3>No media files</h3>
        <p>Upload images, videos, and documents to get started.</p>
        <a href="{{ baseUrl }}/library/add" class="btn btn-primary">Upload Media</a>
      </div>
    </div>
  </main>
</div>
{% endblock %}