{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="/static/css/feed.css">
<link rel="stylesheet" href="/static/css/projects.css">
<link rel="stylesheet" href="/static/css/sidebar.css">
{% endblock %}
{% block content %}
<div class="projects-layout">
    <aside class="sidebar-card">
        <div class="sidebar-heading">Filter</div>
        <div class="sidebar-section">
            <form method="GET" action="/projects">
                <input type="text" name="search" placeholder="Search projects..." value="{{ search }}">
            </form>
        </div>

        <div class="sidebar-section">
            <div class="sidebar-heading">Type</div>
            <div class="sidebar-nav">
                <a href="/projects?tab={{ current_tab }}" class="sidebar-link {% if not project_type %}active{% endif %}"><span class="icon">&#x1F4CB;</span>All</a>
                <a href="/projects?tab={{ current_tab }}&type=game" class="sidebar-link {% if project_type == 'game' %}active{% endif %}"><span class="icon">&#x1F3AE;</span>Game</a>
                <a href="/projects?tab={{ current_tab }}&type=software" class="sidebar-link {% if project_type == 'software' %}active{% endif %}"><span class="icon">&#x1F4BB;</span>Software</a>
                <a href="/projects?tab={{ current_tab }}&type=mobile_app" class="sidebar-link {% if project_type == 'mobile_app' %}active{% endif %}"><span class="icon">&#x1F4F1;</span>Mobile App</a>
                <a href="/projects?tab={{ current_tab }}&type=website" class="sidebar-link {% if project_type == 'website' %}active{% endif %}"><span class="icon">&#x1F310;</span>Website</a>
            </div>
        </div>

        {% if user %}
        <div class="sidebar-section">
            <div class="sidebar-heading">My Projects</div>
            <a href="/projects?user_uid={{ user['uid'] }}" class="btn btn-secondary btn-sm full-width justify-center"><span class="icon">&#x1F464;</span>View My Projects</a>
        </div>
        {% endif %}
    </aside>

    <div class="projects-main">
        <div class="projects-header">
            <div>
                <h1>Projects</h1>
                <span class="subtitle">Discover amazing projects from the DevPlace community</span>
            </div>
            <div class="projects-count">Showing {{ total_count }} of {{ total_count }} projects</div>
        </div>

        <div class="projects-tabs">
            <a href="/projects?tab=recent" class="projects-tab {% if current_tab == 'recent' or not current_tab %}active{% endif %}"><span class="icon">&#x1F550;</span> Recently Released</a>
            <a href="/projects?tab=popular" class="projects-tab {% if current_tab == 'popular' %}active{% endif %}"><span class="icon">&#x1F525;</span> Most Popular</a>
            <a href="/projects?tab=new" class="projects-tab {% if current_tab == 'new' %}active{% endif %}"><span class="icon">&#x1F195;</span> New This Week</a>
            {% if user %}
            <a href="/projects?user_uid={{ user['uid'] }}" class="projects-tab {% if request.query_params.get('user_uid') %}active{% endif %}"><span class="icon">&#x1F464;</span> My Projects</a>
            {% endif %}
        </div>

        <div class="projects-grid">
            {% for project in projects %}
            <a href="/projects/{{ project['slug'] or project['uid'] }}" class="project-card fade-in">
                <div class="project-card-header">
                    <h3 class="project-card-title">{{ project['title'] }}</h3>
                    <form method="POST" action="/votes/project/{{ project['uid'] }}" class="inline-form">
                        <input type="hidden" name="value" value="1">
                        <button type="submit" class="project-card-star">&#x2606;</button>
                    </form>
                </div>

                <div class="project-card-meta">
                    <span>By {{ project.get('author_name', 'Unknown') }}</span>
                    {% if project.get('release_date') %}
                    <span>&#x1F4C5; {{ project['release_date'] }}</span>
                    {% endif %}
                    <span class="project-status {% if project.get('status') == 'Released' %}released{% else %}dev{% endif %}">
                        &#x25CF; {{ project.get('status', 'In Development') }}
                    </span>
                </div>

                <div class="project-card-desc rendered-content" data-render>{{ project.get('description', '')[:200] }}</div>

                <div class="flex-between">
                    <span class="badge badge-type">{{ project.get('project_type', 'software').replace('_', ' ') }}</span>
                    {% if project.get('platforms') %}
                    <div class="project-card-platforms">
                        {% for p in project['platforms'].split(',') %}
                        <span class="platform-tag">{{ p.strip() }}</span>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
            </a>
            {% else %}
            <div class="empty-state empty-state-full">No projects found. Create one!</div>
            {% endfor %}
        </div>
    </div>
</div>

{% if user %}
<button class="feed-fab" id="create-project-btn" title="Add Project" data-modal="create-project-modal">+</button>

<div class="modal-overlay" id="create-project-modal">
    <div class="card modal-card">
        <div class="modal-header">
            <h3>Create Project</h3>
            <button type="button" class="modal-close btn-ghost btn-icon modal-close-btn">&times;</button>
        </div>

        <form method="POST" action="/projects/create">
            <div class="auth-field auth-field-gap">
                <label for="title">Title</label>
                <input type="text" id="title" name="title" required maxlength="200" placeholder="Project name">
            </div>

            <div class="auth-field auth-field-gap">
                <label for="description">Description</label>
                <textarea id="description" name="description" required maxlength="5000" placeholder="Describe your project" class="min-h-100" data-mention></textarea>
            </div>

            <div class="grid-2col">
                <div class="auth-field">
                    <label for="release_date">Release Date</label>
                    <input type="date" id="release_date" name="release_date">
                </div>
                <div class="auth-field">
                    <label for="demo_date">Demo Date</label>
                    <input type="date" id="demo_date" name="demo_date">
                </div>
            </div>

            <div class="auth-field auth-field-gap">
                <label>Type</label>
                <div class="flex-wrap-gap">
                    {% for t in [('game', 'Game'), ('game_asset', 'Game Asset'), ('software', 'Software'), ('mobile_app', 'Mobile App'), ('website', 'Website')] %}
                    <label class="topic-label">
                        <input type="radio" name="project_type" value="{{ t[0] }}" {% if t[0] == 'software' %}checked{% endif %} class="topic-radio">
                        {{ t[1] }}
                    </label>
                    {% endfor %}
                </div>
            </div>

            <div class="auth-field auth-field-gap">
                <label>Status</label>
                <div class="flex-wrap-gap">
                    <label class="topic-label">
                        <input type="radio" name="status" value="In Development" checked class="topic-radio"> In Development
                    </label>
                    <label class="topic-label">
                        <input type="radio" name="status" value="Released" class="topic-radio"> Released
                    </label>
                </div>
            </div>

            <div class="auth-field auth-field-gap-last">
                <label>Platforms</label>
                <div id="platforms-tags" class="flex-wrap-gap-bottom"></div>
                <input type="text" id="platforms-input" class="input-sm" placeholder="Add platform (press Enter)">
                <input type="hidden" id="platforms" name="platforms" value="">
                <div class="platform-presets-wrap">
                    {% for p in ['PC', 'Windows', 'Mac', 'Linux', 'iOS', 'Android', 'Web', 'Console'] %}
                    <button type="button" class="platform-preset" data-platform="{{ p }}">{{ p }}</button>
                    {% endfor %}
                </div>
            </div>

            {% include "_attachment_form.html" %}

            <div class="modal-footer">
                <button type="button" class="modal-close btn btn-secondary">Cancel</button>
                <button type="submit" class="btn btn-primary">Create Project</button>
            </div>
        </form>
    </div>
</div>
{% endif %}
{% endblock %}