{% extends "layout.html" %}

{% block content %}
<div class="timetrack-container">
    <div class="admin-header">
        <h2>Project Management</h2>
        <a href="{{ url_for('create_project') }}" class="btn btn-success">Create New Project</a>
    </div>

    {% if projects %}
    <div class="projects-table">
        <table class="time-history">
            <thead>
                <tr>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Team</th>
                    <th>Status</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Created By</th>
                    <th>Time Entries</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for project in projects %}
                <tr class="{% if not project.is_active %}inactive-project{% endif %}">
                    <td><strong>{{ project.code }}</strong></td>
                    <td>{{ project.name }}</td>
                    <td>
                        {% if project.team %}
                            {{ project.team.name }}
                        {% else %}
                            <em>All Teams</em>
                        {% endif %}
                    </td>
                    <td>
                        <span class="status-badge {% if project.is_active %}active{% else %}inactive{% endif %}">
                            {{ 'Active' if project.is_active else 'Inactive' }}
                        </span>
                    </td>
                    <td>{{ project.start_date.strftime('%Y-%m-%d') if project.start_date else '-' }}</td>
                    <td>{{ project.end_date.strftime('%Y-%m-%d') if project.end_date else '-' }}</td>
                    <td>{{ project.created_by.username }}</td>
                    <td>{{ project.time_entries|length }}</td>
                    <td class="actions">
                        <a href="{{ url_for('edit_project', project_id=project.id) }}" class="btn btn-sm btn-primary">Edit</a>
                        {% if g.user.role.name == 'ADMIN' and project.time_entries|length == 0 %}
                        <form method="POST" action="{{ url_for('delete_project', project_id=project.id) }}" style="display: inline;"
                              onsubmit="return confirm('Are you sure you want to delete this project?')">
                            <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                        </form>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="no-data">
        <p>No projects found. <a href="{{ url_for('create_project') }}">Create your first project</a>.</p>
    </div>
    {% endif %}
</div>

<style>
/* Override container width for admin projects page */
.admin-projects-container {
    max-width: 1200px !important;
    width: auto !important;
    padding: 1.5rem !important;
    margin: 0 auto 2rem auto !important;
}

.projects-table {
    overflow-x: auto;
}

.inactive-project {
    opacity: 0.6;
}

.status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
}

.status-badge.active {
    background-color: #d4edda;
    color: #155724;
}

.status-badge.inactive {
    background-color: #f8d7da;
    color: #721c24;
}

.actions {
    white-space: nowrap;
}

/* Button definitions now in main style.css */

.no-data {
    text-align: center;
    padding: 3rem;
    color: #666;
}
</style>
{% endblock %}