{#
  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 media-sidebar">
    <div class="panel-header">
      <h3>Folders</h3>
      <button class="btn-icon-sm" aria-label="New folder">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
        </svg>
      </button>
    </div>
    <div class="folder-tree">
      <div class="folder-item active">
        <svg class="folder-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
        </svg>
        <span class="folder-name">All Files</span>
      </div>
      <div class="folder-item">
        <svg class="folder-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
        </svg>
        <span class="folder-name">Root Folder</span>
      </div>
      <div class="folder-item">
        <svg class="folder-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
        </svg>
        <span class="folder-name">Images</span>
      </div>
      <div class="folder-item">
        <svg class="folder-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
        </svg>
        <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 your images and videos for digital signage</p>
    </div>

    <div class="content-toolbar">
      <div class="search-wrapper">
        <svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
        </svg>
        <input type="search" placeholder="Search media…" class="form-control search-field" />
      </div>
      <div class="toolbar-actions">
        <button class="btn btn-outline btn-sm">All Media</button>
        <a href="{{ baseUrl }}/library/add" class="btn btn-primary btn-sm">Upload Media</a>
      </div>
    </div>

    <div class="stat-row">
      <div class="stat-box">
        <div class="stat-label">Total Files</div>
        <div class="stat-value">4</div>
      </div>
      <div class="stat-box">
        <div class="stat-label">Storage Used</div>
        <div class="stat-value">12.3 MB</div>
      </div>
      <div class="stat-box">
        <div class="stat-label">Storage Limit</div>
        <div class="stat-value">5 GB</div>
      </div>
    </div>

    <div class="media-grid">
      <div class="media-item">
        <div class="media-thumbnail">
          <img src="https://images.unsplash.com/photo-1444080748397-f442aa95c3e5?w=400&h=300&fit=crop" alt="Galaxy space" />
          <span class="media-type-badge">Image</span>
        </div>
        <div class="media-info">
          <p class="media-name">2000x1158</p>
          <p class="media-size text-xs text-muted">3.3 MB • 1920x1112</p>
        </div>
      </div>
      
      <div class="media-item">
        <div class="media-thumbnail">
          <img src="https://images.unsplash.com/photo-1478098711619-69891b0ec21a?w=400&h=300&fit=crop" alt="Cat portrait" />
          <span class="media-type-badge">Image</span>
        </div>
        <div class="media-info">
          <p class="media-name">Images.jpg</p>
          <p class="media-size text-xs text-muted">5.2 KB • 194x260</p>
        </div>
      </div>
      
      <div class="media-item">
        <div class="media-thumbnail">
          <img src="https://images.unsplash.com/photo-1577720643272-265b434c829c?w=400&h=300&fit=crop" alt="OTS Logo" />
          <span class="media-type-badge">Image</span>
        </div>
        <div class="media-info">
          <p class="media-name">OTS Logo</p>
          <p class="media-size text-xs text-muted">2.9 KB • 360x350</p>
        </div>
      </div>
      
      <div class="media-item">
        <div class="media-thumbnail">
          <img src="https://images.unsplash.com/photo-1590080876-8b7f22b5d5fa?w=400&h=300&fit=crop" alt="Sunrise Hotel" />
          <span class="media-type-badge">Image</span>
        </div>
        <div class="media-info">
          <p class="media-name">suncrest hotel l...</p>
          <p class="media-size text-xs text-muted">4.1 KB • 5824x3401</p>
        </div>
      </div>
    </div>
  </main>
</div>
{% endblock %}