<!DOCTYPE html>
<html lang="en" data-theme="{{ theme }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="ADRScope">
<title>{{ title }}</title>
<style>
{{ css }}
</style>
</head>
<body>
<div id="app">
<header class="header">
<div class="header-left">
<h1 class="logo">{{ title }}</h1>
</div>
<div class="header-center">
<div class="search-container">
<input type="search" id="search" placeholder="Search ADRs..." autocomplete="off">
<span class="search-shortcut">/</span>
</div>
</div>
<div class="header-right">
<div class="view-toggle" role="tablist">
<button class="view-btn active" data-view="list" role="tab" aria-selected="true" title="List view (1)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
</svg>
</button>
<button class="view-btn" data-view="cards" role="tab" aria-selected="false" title="Card view (2)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
<rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>
</svg>
</button>
<button class="view-btn" data-view="timeline" role="tab" aria-selected="false" title="Timeline view (3)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="2" x2="12" y2="22"/><circle cx="12" cy="6" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="18" r="2"/>
</svg>
</button>
<button class="view-btn" data-view="graph" role="tab" aria-selected="false" title="Graph view (4)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><circle cx="12" cy="18" r="3"/>
<line x1="8" y1="8" x2="11" y2="16"/><line x1="16" y1="8" x2="13" y2="16"/>
</svg>
</button>
</div>
<button class="theme-toggle" id="theme-toggle" title="Toggle theme">
<svg class="sun-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
<line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
</svg>
<svg class="moon-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
</svg>
</button>
</div>
</header>
<div class="main-container">
<aside class="sidebar" id="sidebar">
<div class="sidebar-header">
<h2>Filters</h2>
<button class="clear-filters" id="clear-filters">Clear all</button>
</div>
<div class="filter-section">
<h3>Status</h3>
<div class="status-filters" id="status-filters"></div>
</div>
<div class="filter-section">
<h3>Category</h3>
<select id="category-filter" class="filter-select">
<option value="">All categories</option>
</select>
</div>
<div class="filter-section">
<h3>Author</h3>
<select id="author-filter" class="filter-select">
<option value="">All authors</option>
</select>
</div>
<div class="filter-section">
<h3>Project</h3>
<select id="project-filter" class="filter-select">
<option value="">All projects</option>
</select>
</div>
<div class="filter-section">
<h3>Tags</h3>
<div class="tag-cloud" id="tag-filters"></div>
</div>
<div class="filter-section">
<h3>Technologies</h3>
<div class="tag-cloud" id="tech-filters"></div>
</div>
<div class="filter-section">
<h3>Date Range</h3>
<div class="date-filters">
<input type="date" id="date-from" placeholder="From">
<input type="date" id="date-to" placeholder="To">
</div>
</div>
</aside>
<main class="content" id="content">
<div class="content-header">
<span class="result-count" id="result-count"></span>
<div class="sort-controls">
<label for="sort-by">Sort by:</label>
<select id="sort-by" class="sort-select">
<option value="updated-desc">Updated (newest)</option>
<option value="updated-asc">Updated (oldest)</option>
<option value="created-desc">Created (newest)</option>
<option value="created-asc">Created (oldest)</option>
<option value="title-asc">Title (A-Z)</option>
<option value="title-desc">Title (Z-A)</option>
</select>
</div>
</div>
<div class="view-container" id="list-view">
<table class="adr-table">
<thead>
<tr>
<th class="sortable" data-sort="status">Status</th>
<th class="sortable" data-sort="title">Title</th>
<th class="sortable" data-sort="category">Category</th>
<th class="sortable" data-sort="author">Author</th>
<th class="sortable" data-sort="created">Created</th>
<th class="sortable" data-sort="updated">Updated</th>
</tr>
</thead>
<tbody id="adr-list"></tbody>
</table>
</div>
<div class="view-container hidden" id="cards-view">
<div class="card-grid" id="card-grid"></div>
</div>
<div class="view-container hidden" id="timeline-view">
<div class="timeline" id="timeline"></div>
</div>
<div class="view-container hidden" id="graph-view">
<div class="graph-container" id="graph-container">
<canvas id="graph-canvas"></canvas>
</div>
</div>
</main>
</div>
<div class="detail-panel hidden" id="detail-panel">
<div class="detail-header">
<button class="close-detail" id="close-detail" aria-label="Close">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
</svg>
</button>
<div class="detail-nav">
<button class="nav-btn" id="prev-adr" title="Previous (j)">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="15 18 9 12 15 6"/>
</svg>
</button>
<button class="nav-btn" id="next-adr" title="Next (k)">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="9 18 15 12 9 6"/>
</svg>
</button>
</div>
</div>
<div class="detail-content" id="detail-content"></div>
</div>
</div>
<footer class="footer">
<span class="footer-stats" id="footer-stats"></span>
<span class="footer-generated">Generated by <a href="https://github.com/zircote/adrscope" target="_blank" rel="noopener">ADRScope</a></span>
</footer>
<div class="modal hidden" id="shortcuts-modal">
<div class="modal-content">
<h2>Keyboard Shortcuts</h2>
<table class="shortcuts-table">
<tr><td><kbd>/</kbd></td><td>Focus search</td></tr>
<tr><td><kbd>Esc</kbd></td><td>Clear search / Close panel</td></tr>
<tr><td><kbd>j</kbd> / <kbd>↓</kbd></td><td>Next item</td></tr>
<tr><td><kbd>k</kbd> / <kbd>↑</kbd></td><td>Previous item</td></tr>
<tr><td><kbd>Enter</kbd></td><td>Open selected</td></tr>
<tr><td><kbd>1-4</kbd></td><td>Switch view modes</td></tr>
<tr><td><kbd>?</kbd></td><td>Show this help</td></tr>
</table>
<button class="close-modal" id="close-shortcuts">Close</button>
</div>
</div>
<script>
const ADRSCOPE_DATA = {{ data_json }};
{{ js }}
</script>
</body>
</html>