{% extends "account/layout.html" %}
{% block title %}{{ super() }} - {{ page | capitalize }}{% endblock %}
{% block pagetitle %}PROJECTS{% endblock %}
{% block content %}
{% include 'modals/confirm.html' %}
{% include 'projects/modal.html' %}

{% for (category, message) in get_flashed_messages(request) %}
<div class="alert alert-{{ category }} mb-3 fade-in">
    <i class="fas fa-{% if category == 'danger' %}exclamation-circle{% elif category == 'success' %}check-circle{% else %}info-circle{% endif %}"></i>
    <span>{{ message }}</span>
    <button type="button" class="btn-close" data-bs-dismiss="alert"><i class="fas fa-times"></i></button>
</div>
{% endfor %}

{% if projects %}
<div class="tools d-flex justify-content-end mb-4 gap-2">
    <div class="btn-group" role="group">
        <a href="{{ url_for('list_user_projects') }}?view=grid" 
           class="btn {% if request.session['view'] != 'list' %}btn-accent{% else %}btn-outline-secondary{% endif %}" 
           title="Grid view">
            <i class="fas fa-th-large fa-fw"></i>
        </a>
        <a href="{{ url_for('list_user_projects') }}?view=list" 
           class="btn {% if request.session['view'] == 'list' %}btn-accent{% else %}btn-outline-secondary{% endif %}" 
           title="Table view">
            <i class="fas fa-th-list fa-fw"></i>
        </a>
    </div>
    <div class="btn-group" role="group">
        <a href="#confirmModal" role="button" class="btn btn-outline-danger" data-bs-toggle="modal">
            <i class="fas fa-trash-alt fa-fw"></i>
        </a>
        <a href="#projectModal" role="button" class="btn btn-accent" data-bs-toggle="modal">
            <i class="fas fa-plus fa-fw"></i>
            <span class="d-none d-sm-inline">New Project</span>
        </a>
    </div>
</div>

{% if request.session['view'] == 'list' %}
{% include 'projects/list.html' %}
{% else %}
{% include 'projects/grid.html' %}
{% endif %}

<div class="d-none" id="accessToken">{{ request.session['access_token'] }}</div>

{% else %}
<div class="empty-state fade-in">
    <i class="fas fa-sitemap"></i>
    <div class="empty-state-title">No projects yet</div>
    <p class="empty-state-text mb-4">Create your first project to get started</p>
    <a href="#projectModal" class="btn btn-accent" data-bs-toggle="modal">
        <i class="fas fa-plus fa-fw"></i>
        Create Project
    </a>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="/static/js/github.js" async></script>
<script src="/static/js/projects.js" async></script>
{% endblock %}