{% extends "base.html" %}{% block title %}{{ repo_name }} – Git{% endblock %}
{% block head %}
<style>
.repo-layout { display: grid; grid-template-columns: 1fr 320px; gap: 1.25rem; }
@media(max-width:800px){.repo-layout{grid-template-columns:1fr}}
.repo-main { min-width: 0; }
.repo-sidebar { display: flex; flex-direction: column; gap: 1rem; }

/* ── Przebudowana lista plików ── */
.files-toolbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.015); }
.files-toolbar.search-wrap { position: relative; flex: 1; min-width: 200px; }
.files-toolbar.search-wrap input { width: 100%; padding: 0.45rem 0.6rem 0.45rem 1.9rem; }
.files-toolbar.search-wrap.s-icon { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); opacity: 0.5; font-size: 0.85rem; pointer-events: none; }
.count-badge { font-size: 0.72rem; padding: 0.2rem 0.55rem; border-radius: 99px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.count-badge b { color: var(--text-bright); }

.file-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.file-table thead th { position: sticky; top: 0; background: var(--bg2, var(--card)); z-index: 2; text-align: left; padding: 0.55rem 0.75rem; color: var(--muted); font-weight: 600; border-bottom: 2px solid var(--border); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; user-select: none; white-space: nowrap; }
.file-table thead th:hover { color: var(--text-bright); }
.file-table thead th.sort-arrow { font-size: 0.62rem; opacity: 0.6; margin-left: 0.25rem; }
.file-table tbody td { padding: 0.42rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle; }
.file-table tbody tr { transition: background 0.12s; }
.file-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.file-table.f-icon { width: 1.6rem; text-align: center; font-size: 0.95rem; }
.file-table.f-name { word-break: break-all; }
.file-table.f-name a { color: var(--text-bright); font-weight: 500; }
.file-table.f-name a:hover { color: var(--link); }
.file-table.f-name a.dir { color: var(--link); font-weight: 600; }
.file-table.f-size { color: var(--muted); font-size: 0.76rem; text-align: right; white-space: nowrap; font-family: var(--mono); }
.file-table.f-age { color: var(--muted); font-size: 0.75rem; text-align: right; white-space: nowrap; }
.files-empty { display: none; padding: 2rem 1rem; text-align: center; color: var(--muted); }
.show-more-row { display: none; padding: 0.7rem; text-align: center; border-top: 1px solid var(--border); }
.show-more-row button { background: var(--bg); border: 1px solid var(--border); color: var(--link); padding: 0.35rem 1.1rem; border-radius: var(--radius-sm); font-size: 0.8rem; cursor: pointer; }
.show-more-row button:hover { border-color: var(--accent); }

.commit-list { list-style: none; }
.commit-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.commit-item:last-child { border-bottom: none; }
.commit-hash { font-family: var(--mono); font-size: 0.75rem; color: var(--accent); min-width: 4.5rem; flex-shrink: 0; }
.commit-hash a { color: var(--accent); }
.commit-msg { flex: 1; font-size: 0.84rem; color: var(--text); line-height: 1.4; }
.commit-msg a { color: var(--text); }
.commit-msg a:hover { color: var(--link); }
.commit-meta { font-size: 0.7rem; color: var(--muted); margin-top: 0.15rem; }

.pagination { display: flex; gap: 0.25rem; justify-content: center; padding: 0.5rem; }
.pagination a, .pagination span { padding: 0.3rem 0.6rem; border-radius: var(--radius-xs); font-size: 0.82rem; font-weight: 500; }
.pagination a { color: var(--link); text-decoration: none; }
.pagination a:hover { background: var(--bg2); }
.pagination.current { background: var(--accent2); color: #fff; }
.pagination.disabled { color: var(--muted); opacity: 0.5; }

.side-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.side-card h4 { padding: 0.6rem 1rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border-bottom: 1px solid var(--border); margin: 0; background: rgba(255,255,255,0.02); }
.side-card .body { padding: 0.6rem 1rem; }
.side-card .body .row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding: 0.24rem 0; font-size: 0.82rem; }
.side-card .body .row .lbl { color: var(--muted); flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-card .body .row .val { color: var(--text-bright); font-weight: 600; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.side-card .body .row .val code { color: var(--accent); background: var(--bg); padding: 0.1rem 0.45rem; border-radius: var(--radius-xs); border: 1px solid var(--border); font-size: 0.75rem; }

.collapse-toggle { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 0.4rem; }
.collapse-toggle.arrow { transition: transform 0.2s; font-size: 0.7rem; }
.collapse-toggle.open.arrow { transform: rotate(90deg); }
.collapse-body { display: none; }
.collapse-body.show { display: block; }

.breadcrumb { font-size: 0.85rem; padding: 0.4rem 0; margin-bottom: 0.5rem; }
.breadcrumb a { color: var(--link); }
.breadcrumb span { color: var(--muted); }

.repo-header { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.repo-header h2 { margin: 0; font-size: 1.3rem; }
.repo-header.clone-cmd { background: var(--bg); border: 1px solid var(--border); padding: 0.3rem 0.7rem; border-radius: var(--radius-sm); font-family: var(--mono); font-size: 0.75rem; color: var(--muted); flex: 1; min-width: 250px; }
</style>
{% endblock %}
{% block content %}
{% if (git_readonly or repo_readonly) and not can_edit %}
<div class="card" style="margin-bottom:1rem;border-left:3px solid var(--accent);padding:0.6rem 1rem;font-size:0.85rem;color:var(--muted)">{{ t('git_readonly_notice') }}</div>
{% endif %}

{% if breadcrumbs %}
<div class="breadcrumb"><a href="/git"> Git</a> <span>/</span> <a href="/git/{{ repo_name }}">{{ repo_name }}</a>{% for bc in breadcrumbs %} <span>/</span> <a href="/git/{{ repo_name }}/tree/{{ bc.path }}?branch={{ branch }}">{{ bc.name }}</a>{% endfor %}</div>
{% endif %}

<div class="repo-header">
 <h2> <strong>{{ repo_name }}</strong></h2>
 <code class="clone-cmd">git clone https://git.paganlinux.eu/{{ repo_name }}.git</code>
</div>

<div class="repo-layout">
 <!-- Main content -->
 <div class="repo-main">
 <!-- Files -->
 <div class="card" style="margin-bottom:1rem">
 <div class="card-header" style="cursor:pointer" onclick="this.querySelector('.arrow').classList.toggle('open');document.getElementById('files-body').classList.toggle('show')">
 <span class="collapse-toggle open"><span class="arrow">▶</span> {{ t('files_section') }} ({{ items|length }}){% if branch %} · <span class="badge badge-info"> {{ branch }}</span>{% endif %}</span>
 <div style="display:flex;gap:0.4rem;align-items:center">
 {% if can_edit %}<a href="{{ subpath('/git/' ~ repo_name ~ '/upload') }}{% if tree_path %}?dir={{ tree_path }}{% endif %}" class="btn btn-sm" onclick="event.stopPropagation()">
 <svg class="i16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M17 8l-5-5-5 5"/><path d="M12 3v12"/></svg> Wgraj pliki</a>{% endif %}
 {% if can_edit %}<a href="/git/{{ repo_name }}/new" class="btn btn-sm btn-primary" onclick="event.stopPropagation()"> Nowy</a>{% endif %}
 </div>
 </div>
 <div class="collapse-body show" id="files-body">
 {% if items %}
 <div class="files-toolbar">
 <div class="search-wrap">
 <span class="s-icon"></span>
 <input id="file-filter" type="text" placeholder="{{ t('filter_files') }}" autocomplete="off">
 </div>
 <span class="count-badge" id="file-counter">{{ items|length }} / {{ items|length }}</span>
 {% if dir_count %}<span class="count-badge"> <b>{{ dir_count }}</b></span>{% endif %}
 {% if file_count %}<span class="count-badge"> <b>{{ file_count }}</b></span>{% endif %}
 </div>
 <div style="overflow-x:auto">
 <table class="file-table" id="file-table">
 <thead><tr>
 <th style="width:1.6rem;cursor:default"></th>
 <th data-sort="name">{{ t('name_col') }}<span class="sort-arrow">↕</span></th>
 <th data-sort="size" style="width:90px" class="text-right">{{ t('size_col') }}<span class="sort-arrow">↕</span></th>
 <th data-sort="ts" style="width:150px" class="text-right">{{ t('last_change') }}<span class="sort-arrow">↕</span></th>
 {% if can_edit %}<th style="width:44px"></th>{% endif %}
 </tr></thead>
 <tbody>
 {% for item in items %}
 <tr data-name="{{ (item.name ~ ('/' if item.type=='dir' else ''))|lower }}" data-size="{{ item.size or '0' }}" data-ts="{{ item.ts }}" data-type="{{ item.type }}">
 <td class="f-icon {{ item.type }}">{{ '' if item.type=='dir' else '' }}</td>
 <td class="f-name">
 {% if item.type=='dir' %}
 <a href="/git/{{ repo_name }}/tree/{{ item.path }}?branch={{ branch }}" class="dir">{{ item.name }}/</a>
 {% else %}
 <a href="/git/{{ repo_name }}/file?path={{ item.path }}&branch={{ branch }}">{{ item.name }}</a>
 {% endif %}
 </td>
 <td class="f-size">{% if item.type=='file' %}{{ fmt_size(item.size) }}{% endif %}</td>
 <td class="f-age">{{ item.last_commit }}</td>
 {% if can_edit %}
 <td class="text-right" style="white-space:nowrap">
 <a href="{{ subpath('/git/' ~ repo_name ~ '/rename') }}?path={{ item.path }}{% if branch %}&branch={{ branch }}{% endif %}" class="btn btn-sm" title="{{ t('rename_btn') }}" style="padding:0.15rem 0.5rem;font-size:0.72rem"><svg class="i16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg></a>
 <form method="POST" action="{{ subpath('/git/' ~ repo_name ~ '/delete') }}" onsubmit="return confirm('Usunąć {{ item.name }}{{ '/' if item.type=='dir' else '' }}? Ta operacja tworzy commit.')" style="margin:0">
 <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
 <input type="hidden" name="path" value="{{ item.path }}">
 <button class="btn btn-sm btn-danger" style="padding:0.15rem 0.5rem;font-size:0.72rem"><svg class="i16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M10 11v6M14 11v6"/></svg></button>
 </form>
 </td>
 {% endif %}
 </tr>
 {% endfor %}
 </tbody>
 </table>
 </div>
 <div class="files-empty" id="files-empty"> {{ t('no_files_match') }}</div>
 <div class="show-more-row" id="show-more-row">
 <button id="show-more-btn">{{ t('show_more') }}</button>
 </div>
 {% else %}
 <div style="padding:1.6rem 1rem;text-align:center">
  <p class="text-muted" style="margin:0 0 0.8rem">Pusty katalog</p>
  {% if can_edit %}
  <div style="display:flex;gap:0.5rem;justify-content:center;flex-wrap:wrap">
   <a href="{{ subpath('/git/' ~ repo_name ~ '/upload') }}{% if tree_path %}?dir={{ tree_path }}{% endif %}" class="btn btn-sm btn-primary">
   <svg class="i16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M17 8l-5-5-5 5"/><path d="M12 3v12"/></svg> Wgraj pliki</a>
   <a href="/git/{{ repo_name }}/new" class="btn btn-sm"> Nowy plik</a>
  </div>
  {% endif %}
 </div>
 {% endif %}
 </div>
 </div>

 <!-- README -->
 {% if readme_html %}
 <div class="card" style="margin-bottom:1rem">
 <div class="card-header" style="cursor:pointer;display:flex;align-items:center;gap:.5rem" onclick="this.querySelector('.arrow').classList.toggle('open');document.getElementById('readme-body').classList.toggle('show')">
 <span class="collapse-toggle open"><span class="arrow">▶</span> {{ t('readme_section') }}</span>
 {% if readme_has and readme_has.pl and readme_has.en %}
 <span style="margin-left:auto;font-size:.75rem;display:inline-flex;gap:.35rem;align-items:center" onclick="event.stopPropagation()">
 <a href="{{ request.path }}?readme=pl" style="{% if readme_lang=='pl' %}font-weight:700;text-decoration:none{% else %}opacity:.6{% endif %}">PL</a>
 <span style="opacity:.3">|</span>
 <a href="{{ request.path }}?readme=en" style="{% if readme_lang=='en' %}font-weight:700;text-decoration:none{% else %}opacity:.6{% endif %}">EN</a>
 </span>
 {% endif %}
 </div>
 <div class="collapse-body show" id="readme-body" style="padding:0 0.25rem">
 {{ readme_html|safe }}
 </div>
 </div>
 {% endif %}

 <!-- Commits -->
 <div class="card">
 <div class="card-header" style="cursor:pointer" onclick="this.querySelector('.arrow').classList.toggle('open');document.getElementById('commits-body').classList.toggle('show')">
 <span class="collapse-toggle open"><span class="arrow">▶</span> {{ t('commits_section') }} <span class="badge badge-info">{{ total_commits }}</span></span>
 </div>
 <div class="collapse-body show" id="commits-body">
 {% if commits %}
 <ul class="commit-list" style="padding:0 0.25rem">
 {% for c in commits %}
 <li class="commit-item">
 <span class="commit-hash"><a href="/git/{{ repo_name }}/commit/{{ c.hash }}">{{ c.hash }}</a></span>
 <span class="commit-msg">
 <a href="/git/{{ repo_name }}/commit/{{ c.hash }}">{{ c.msg }}</a>
 <div class="commit-meta">{{ c.author }} · {{ c.date }}</div>
 </span>
 </li>
 {% endfor %}
 </ul>
 <!-- Pagination -->
 {% if total_pages > 1 %}
 <div class="pagination">
 {% if page > 1 %}<a href="?page={{ page-1 }}&branch={{ branch }}">←</a>{% else %}<span class="disabled">←</span>{% endif %}
 {% for p in range(1, total_pages+1) %}
 {% if p == page %}<span class="current">{{ p }}</span>
 {% elif p <= 3 or p > total_pages-3 or (p >= page-1 and p <= page+1) %}
 <a href="?page={{ p }}&branch={{ branch }}">{{ p }}</a>
 {% elif p == 4 or p == total_pages-3 %}<span class="disabled">…</span>
 {% endif %}
 {% endfor %}
 {% if page < total_pages %}<a href="?page={{ page+1 }}&branch={{ branch }}">→</a>{% else %}<span class="disabled">→</span>{% endif %}
 </div>
 {% endif %}
 {% else %}
 <p class="text-muted" style="padding:1rem;text-align:center">Brak commitów</p>
 {% endif %}
 </div>
 </div>
 </div>

 <!-- Sidebar -->
 <div class="repo-sidebar">
 {% if releases %}
 <div class="side-card">
 <h4> {{ t('releases_label') }}</h4>
 <div class="body" style="display:flex;flex-direction:column;gap:0.35rem">
 {% for rel in releases %}
 <a href="{{ rel.url }}" class="btn btn-sm" style="width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left" title="{{ rel.filename }}">
 <span>⬇ <strong>{{ rel.tag }}</strong></span>
 <span class="text-muted" style="font-size:0.72rem">{{ rel.size_fmt }}</span>
 </a>
 {% endfor %}
 <span class="text-muted" style="font-size:0.72rem"> <a href="https://repo.paganlinux.eu/sources/" target="_blank" rel="noopener">{{ t('all_sources_btn') }}</a></span>
 </div>
 </div>
 {% endif %}

 <div class="side-card">
 <h4>{{ t('about_repo') }}</h4>
 <div class="body">
 <div class="row"><span class="lbl">{{ t('commits_label') }}</span><span class="val">{{ total_commits }}</span></div>
 <div class="row"><span class="lbl">{{ t('branches_count') }}</span><span class="val">{{ branch_count }}</span></div>
 <div class="row"><span class="lbl">{{ t('contributors_label') }}</span><span class="val">{{ contrib_count }}</span></div>
 <div class="row"><span class="lbl">{{ t('issues_label') }}</span><span class="val">{{ issue_count }}</span></div>
 <div class="row"><span class="lbl">{{ t('default_branch') }}</span><span class="val"><code style="font-size:0.75rem">{{ branch }}</code></span></div>
 </div>
 </div>

 <div class="side-card">
 <h4> {{ t('actions') }}</h4>
 <div class="body" style="display:flex;flex-direction:column;gap:0.35rem">
 <a href="/git/{{ repo_name }}/branches" class="btn btn-sm" style="width:100%"> {{ t('branches_btn') }}</a>
 <a href="/git/{{ repo_name }}/contributors" class="btn btn-sm" style="width:100%"> {{ t('contributors_btn') }}</a>
 <a href="/git/{{ repo_name }}/issues" class="btn btn-sm" style="width:100%"> {{ t('issues_btn') }} ({{ issue_count }})</a>
 <a href="/git/{{ repo_name }}/archive?branch={{ branch }}" class="btn btn-sm" style="width:100%"> {{ t('download_tar') }}</a>
 {% if can_edit %}
 <a href="/git/{{ repo_name }}/new" class="btn btn-sm btn-primary" style="width:100%"> {{ t('new_file_btn') }}</a>
 <a href="{{ subpath('/git/' ~ repo_name ~ '/upload') }}{% if tree_path %}?dir={{ tree_path }}{% endif %}" class="btn btn-sm" style="width:100%">
 <svg class="i16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M17 8l-5-5-5 5"/><path d="M12 3v12"/></svg> Wgraj pliki</a>
 {% endif %}
 {% if session.get('is_admin') %}
 <a href="/git/{{ repo_name }}/release" class="btn btn-sm" style="width:100%;background:var(--accent2);color:#fff;border:none"> {{ t('new_release_btn') }}</a>
 <a href="/git/{{ repo_name }}/settings" class="btn btn-sm" style="width:100%"> {{ t('settings_btn') }}</a>
 {% endif %}
 </div>
 </div>
 </div>
</div>

<script>
// Init collapse arrows
document.querySelectorAll('.collapse-toggle.open.arrow').forEach(el => el.style.transform = 'rotate(90deg)');

(function () {
 var table = document.getElementById('file-table');
 if (!table) return;
 var tbody = table.querySelector('tbody');
 var rows = Array.prototype.slice.call(tbody.querySelectorAll('tr'));
 var filter = document.getElementById('file-filter');
 var counter = document.getElementById('file-counter');
 var empty = document.getElementById('files-empty');
 var showMoreRow = document.getElementById('show-more-row');
 var showMoreBtn = document.getElementById('show-more-btn');
 var REVEAL_STEP = 250; // ile wierszy pokazujemy na start / przy "pokaż więcej"
 var revealed = REVEAL_STEP;
 var currentSort = { key: 'name', dir: 1 };

 // ── Sortowanie ──
 function sortRows(key, dir) {
 var numKey = (key === 'size' || key === 'ts');
 rows.sort(function (a, b) {
 var av = a.getAttribute('data-' + key);
 var bv = b.getAttribute('data-' + key);
 if (numKey) {
 av = parseInt(av, 10) || 0;
 bv = parseInt(bv, 10) || 0;
 return (av - bv) * dir;
 }
 return av.localeCompare(bv) * dir;
 });
 rows.forEach(function (r) { tbody.appendChild(r); });
 applyFilter();
 }
 table.querySelectorAll('th[data-sort]').forEach(function (th) {
 th.addEventListener('click', function () {
 var key = th.getAttribute('data-sort');
 currentSort.dir = (currentSort.key === key)? -currentSort.dir: 1;
 currentSort.key = key;
 table.querySelectorAll('th[data-sort].sort-arrow').forEach(function (a) { a.textContent = '↕'; });
 th.querySelector('.sort-arrow').textContent = (currentSort.dir === 1)? '▲' : '▼';
 sortRows(key, currentSort.dir);
 });
 });

 // ── Filtrowanie (wyszukiwarka) + limit "pokaż więcej" ──
 function applyFilter() {
 var q = (filter? filter.value: '').toLowerCase().trim();
 var visible = 0, shown = 0;
 rows.forEach(function (r) {
 var match = !q || r.getAttribute('data-name').indexOf(q)!== -1;
 var withinLimit = shown < revealed;
 var show = match && withinLimit;
 r.style.display = show? '' : 'none';
 if (match) { visible++; shown++; }
 });
 if (showMoreRow) {
 showMoreRow.style.display = (!q && rows.length > revealed)? 'block' : 'none';
 }
 if (counter) counter.textContent = visible + ' / ' + rows.length;
 if (empty) empty.style.display = (visible === 0)? 'block' : 'none';
 }
 if (filter) filter.addEventListener('input', function () {
 revealed = REVEAL_STEP; // reset limitu przy nowym wyszukiwaniu
 applyFilter();
 });
 if (showMoreBtn) showMoreBtn.addEventListener('click', function () {
 revealed += REVEAL_STEP;
 if (revealed >= rows.length) { revealed = rows.length; }
 applyFilter();
 });

 applyFilter();
})();
</script>
{% endblock %}