{{ define "main" }}
<div class="article-content">
    <h1>Планы</h1>

    {{ $upcoming := slice }}
    {{ $completed := slice }}

    {{ range where .Site.RegularPages "Section" "plans" }}
        {{ $status := .Params.status }}
        {{ if or (eq $status "done") (eq $status "cancelled") }}
            {{ $completed = $completed | append . }}
        {{ else }}
            {{ $upcoming = $upcoming | append . }}
        {{ end }}
    {{ end }}

    {{ $upcoming = sort $upcoming ".Params.plan_date" "asc" }}
    {{ $completed = sort $completed ".Params.done_date" "desc" }}

    <h3 class="mb-3">Предстоящие</h3>
    {{ range $upcoming }}
    <div class="card plan-card {{ .Params.status }} mb-3">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-start">
                <h4 class="card-title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h4>
                <span class="status-badge">
                    {{ if eq .Params.status "planned" }}🟡 Запланировано{{ end }}
                    {{ if eq .Params.status "in_progress" }}🟠 В процессе{{ end }}
                </span>
            </div>
            {{ if .Params.plan_date }}
            <p class="text-muted mb-0">Планируется: {{ time .Params.plan_date | dateFormat "02.01.2006" }}</p>
            {{ end }}
        </div>
    </div>
    {{ end }}

    {{ if $completed }}
    <h3 class="mt-4 mb-3">Завершённые</h3>
    {{ range $completed }}
    <div class="card plan-card {{ .Params.status }} mb-3">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-start">
                <h4 class="card-title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h4>
                <span class="status-badge">
                    {{ if eq .Params.status "done" }}✅ Сделано{{ end }}
                    {{ if eq .Params.status "cancelled" }}❌ Отменено{{ end }}
                </span>
            </div>
            {{ if .Params.done_date }}
            <p class="text-muted mb-0">Завершено: {{ time .Params.done_date | dateFormat "02.01.2006" }}</p>
            {{ end }}
        </div>
    </div>
    {{ end }}
    {{ end }}
</div>

<script>
// Filter by status from URL
document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    const status = urlParams.get('status');
    if (status) {
        document.querySelectorAll('.plan-card').forEach(card => {
            if (!card.classList.contains(status)) {
                card.style.display = 'none';
            }
        });
    }
});
</script>
{{ end }}