{% extends "base.html" %}
{% block title %}{{ _('My Projects') }}{% endblock %}

{% block content %}
<div class="container mt-4">
    <h1>{{ _('My Projects') }}</h1>
    
    <p class="lead">{{ _('Here are all the projects you are a member of.') }}</p>
    
    <div class="mb-4">
        <a href="{{ url_for('projects.create_project') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> {{ _('Create New Project') }}
        </a>
    </div>
    
    {% if projects %}
        <div class="row">
            {% for project in projects %}
                <div class="col-md-4 mb-4">
                    <div class="card h-100">
                        <div class="card-body">
                            <h5 class="card-title">{{ project.name }}</h5>
                            {% if project.description %}
                                <p class="card-text">{{ project.description }}</p>
                            {% endif %}
                            
                            {% if project.created_by_id == current_user.id %}
                                <span class="badge bg-info">{{ _('Creator') }}</span>
                            {% endif %}
                            
                            {% if project.id == current_user.current_project_id %}
                                <span class="badge bg-success">{{ _('Current') }}</span>
                            {% endif %}
                            
                            <div class="mt-2">
                                <span class="badge bg-secondary">
                                    <i class="fas fa-users"></i> {{ project.memberships|length }} {{ _('members') }}
                                </span>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="btn-group" role="group">
                                <a href="{{ url_for('projects.project_detail', project_id=project.id) }}" class="btn btn-sm btn-outline-primary">
                                    <i class="fas fa-eye"></i> {{ _('View') }}
                                </a>
                                
                                {% if project.id != current_user.current_project_id %}
                                    <a href="{{ url_for('projects.switch_project', project_id=project.id) }}" class="btn btn-sm btn-outline-success">
                                        <i class="fas fa-exchange-alt"></i> {{ _('Switch to') }}
                                    </a>
                                {% endif %}
                                
                                {% if project.created_by_id != current_user.id %}
                                    <a href="{{ url_for('projects.leave_project', project_id=project.id) }}" class="btn btn-sm btn-outline-danger" 
                                       onclick="return confirm('Are you sure you want to leave this project?');">
                                        <i class="fas fa-sign-out-alt"></i> {{ _('Leave') }}
                                    </a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="alert alert-info">
            <p>{{ _('You are not a member of any projects yet.') }}</p>
            <p>{{ _('Create your first project or join one via an invitation link!') }}</p>
        </div>
    {% endif %}
    
    <div class="mt-4">
        <h3>{{ _('About Projects') }}</h3>
        <ul>
            <li>{{ _('Each project has its own set of thoughts and rankings.') }}</li>
            <li>{{ _('You can only submit thoughts to projects you are a member of.') }}</li>
            <li>{{ _('You can only see and rank thoughts in your current project.') }}</li>
            <li>{{ _('You cannot leave a project if you created it or have submitted thoughts to it.') }}</li>
            <li>{{ _('Projects are private - they can only be joined via invitation links.') }}</li>
        </ul>
    </div>
</div>
{% endblock %}