OTSSignsTheme/custom/otssignange/views/displays.twig

{#
  OTS Signage Modern Theme - Displays Page Override
  Two-column layout with folder panel on left, modern display table
#}
{% extends "authed.twig" %}

{% block pageTitle %}Displays{% endblock %}

{% block content %}
<div class="ots-theme two-column-layout">
  <aside class="left-panel displays-sidebar">
    <div class="panel-header">
      <h3>Folders</h3>
      <button class="btn-icon-sm" aria-label="Expand/collapse">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="12 3 20 9 12 15 4 9 12 3"/><polyline points="4 15 12 21 20 15"/>
        </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 Items</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">
          <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">TEMPLATE_DemoHolder</span>
      </div>
      <div class="folder-item" style="margin-left: 16px;">
        <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">Hospitality</span>
      </div>
      <div class="folder-item" style="margin-left: 16px;">
        <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">Retail</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">OTS Signs Internal</span>
      </div>
    </div>
  </aside>

  <main class="content-panel">
    <div class="page-header">
      <h1>Displays</h1>
      <p class="text-muted">Manage and monitor your digital signage displays</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 displays…" class="form-control search-field" />
      </div>
      <div class="toolbar-actions">
        <button class="btn btn-outline btn-sm">Columns</button>
        <a href="{{ baseUrl }}/display/add" class="btn btn-primary btn-sm">Add Display</a>
      </div>
    </div>

    <div class="stat-row">
      <div class="stat-box">
        <div class="stat-label">Total</div>
        <div class="stat-value">1</div>
      </div>
      <div class="stat-box">
        <div class="stat-label">Online</div>
        <div class="stat-value text-success">1</div>
      </div>
      <div class="stat-box">
        <div class="stat-label">Offline</div>
        <div class="stat-value text-danger">0</div>
      </div>
    </div>

    <div class="table-wrapper">
      <table class="table table-striped">
        <thead>
          <tr>
            <th style="width: 25%;">Display</th>
            <th style="width: 15%;">Status</th>
            <th style="width: 20%;">Folder</th>
            <th style="width: 15%;">Group</th>
            <th style="width: 15%;">Last Check-in</th>
            <th style="width: 10%;">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><strong>Test1</strong></td>
            <td><span class="badge badge-success">Online</span></td>
            <td>TEMPLATE_DemoHolder</td>
            <td>Test Screens</td>
            <td><span class="text-xs">just now</span></td>
            <td>
              <button class="btn-icon-sm" aria-label="Actions">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </main>
</div>
{% endblock %}