{% extends "base.html" %}
{% block title %}Проекты — Morozovka Portal{% endblock %}
{% block main_class %}container{% endblock %}

{% block head %}
<style>
    .header-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
    .btn-add { background: #238636; color: white; text-decoration: none; padding: 10px 20px; border-radius: 5px; font-weight: bold; }
    .btn-add:hover { background: #2ea043; text-decoration: none; }
    .back-link { display: block; margin-bottom: 15px; color: #8b949e; text-decoration: none; }
    .back-link:hover { color: #58a6ff; }

    .filters { background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 15px 20px; margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
    .filter-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .filter-group-label { color: #8b949e; font-size: .8rem; text-transform: uppercase; font-weight: 600; margin-right: 5px; }
    .filter-chip { display: inline-block; padding: 6px 12px; background: #21262d; border: 1px solid #30363d; border-radius: 20px; color: #8b949e; text-decoration: none; font-size: .85rem; transition: all .15s; }
    .filter-chip:hover { border-color: #58a6ff; color: #e6edf3; text-decoration: none; }
    .filter-chip.active { background: rgba(88,166,255,.15); border-color: #58a6ff; color: #58a6ff; }
    .filter-chip.clear { background: transparent; border-color: #f85149; color: #f85149; }
    .filter-chip.clear:hover { background: rgba(248,81,73,.15); }

    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
    .card { background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 20px; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: border-color 0.2s; }
    .card:hover { border-color: #58a6ff; text-decoration: none; }
    .card h3 { margin: 0 0 10px 0; color: #e6edf3; font-size: 1.15rem; }
    .card p { color: #8b949e; font-size: 0.9rem; flex-grow: 1; margin-bottom: 15px; line-height: 1.5; }

    .badges { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
    .badge { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; text-transform: uppercase; }
    .status-idea { background: #30363d; color: white; }
    .status-in_progress { background: #1f6feb; color: white; }
    .status-completed { background: #238636; color: white; }
    .status-frozen { background: #da3633; color: white; }
    .vis-public { background: rgba(63,185,80,0.2); color: #3fb950; border: 1px solid #3fb950; }
    .vis-internal { background: rgba(210,153,34,0.2); color: #d29922; border: 1px solid #d29922; }
    .vis-private { background: rgba(248,81,73,0.2); color: #f85149; border: 1px solid #f85149; }

    .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
    .tag { font-size: .7rem; background: rgba(88,166,255,.1); color: #58a6ff; padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(88,166,255,.3); }

    .card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; border-top: 1px solid #30363d; padding-top: 15px; font-size: 0.85rem; color: #8b949e; }
    .repo-link { color: #58a6ff; }
    .empty { color: #8b949e; padding: 40px; text-align: center; background: #161b22; border-radius: 8px; border: 1px dashed #30363d; grid-column: 1 / -1; }
</style>
{% endblock %}

{% block content %}
<a href="/" class="back-link">← На главную</a>
<div class="header-actions">
    <h1>Каталог проектов</h1>
    {% if role in ['admin', 'professor', 'lead'] %}
    <a href="/projects/new" class="btn-add">+ Добавить проект</a>
    {% endif %}
</div>

<div class="filters">
    <div class="filter-group">
        <span class="filter-group-label">Статус:</span>
        <a href="?{% if current_tag %}tag={{ current_tag }}&{% endif %}status=" class="filter-chip {% if not current_status %}active{% endif %}">Все</a>
        <a href="?{% if current_tag %}tag={{ current_tag }}&{% endif %}status=idea" class="filter-chip {% if current_status == 'idea' %}active{% endif %}">Идея</a>
        <a href="?{% if current_tag %}tag={{ current_tag }}&{% endif %}status=in_progress" class="filter-chip {% if current_status == 'in_progress' %}active{% endif %}">В работе</a>
        <a href="?{% if current_tag %}tag={{ current_tag }}&{% endif %}status=completed" class="filter-chip {% if current_status == 'completed' %}active{% endif %}">Завершён</a>
        <a href="?{% if current_tag %}tag={{ current_tag }}&{% endif %}status=frozen" class="filter-chip {% if current_status == 'frozen' %}active{% endif %}">Заморожен</a>
    </div>

    {% if all_tags %}
    <div class="filter-group">
        <span class="filter-group-label">Теги:</span>
        {% for t in all_tags %}
        <a href="?{% if current_status %}status={{ current_status }}&{% endif %}tag={{ t }}" class="filter-chip {% if current_tag == t %}active{% endif %}">#{{ t }}</a>
        {% endfor %}
    </div>
    {% endif %}

    {% if current_tag or current_status %}
    <div class="filter-group">
        <a href="/projects" class="filter-chip clear">✕ Сбросить</a>
    </div>
    {% endif %}
</div>

<div class="grid">
    {% for proj in projects %}
    <a href="/projects/{{ proj.id }}" class="card">
        <div class="badges">
            <span class="badge status-{{ proj.status }}">
                {% if proj.status == 'idea' %}Идея
                {% elif proj.status == 'in_progress' %}В работе
                {% elif proj.status == 'completed' %}Завершён
                {% else %}Заморожен{% endif %}
            </span>
            <span class="badge vis-{{ proj.visibility }}">
                {% if proj.visibility == 'public' %}Публичный
                {% elif proj.visibility == 'internal' %}Внутренний
                {% else %}Приватный{% endif %}
            </span>
        </div>
        <h3>{{ proj.title }}</h3>
        <p>{{ proj.description or 'Описание отсутствует.' }}</p>
        {% if proj.tags %}
        <div class="tags">
            {% for t in proj.tags.split(',') %}<span class="tag">#{{ t.strip() }}</span>{% endfor %}
        </div>
        {% endif %}
        <div class="card-footer">
            <span>Подробнее →</span>
            {% if proj.gitea_url %}<span class="repo-link">📦 Репозиторий</span>{% endif %}
        </div>
    </a>
    {% else %}
    <div class="empty">Проектов, соответствующих фильтрам, пока нет.</div>
    {% endfor %}
</div>
{% endblock %}