{% extends "templates/layout.html" %}

{% block content %}
<main class="main-container">
    <a href="/" class="back-link-top">&larr; back</a>
    <header>
        <h1>Projects</h1>
    </header>

    <section class="projects-category">
        <ul class="project-list">
            {% for project in projects %}
            <li class="project-item">
                <div class="project-meta">
                    <h3>{{ project.name }}</h3>
                    <p>{{ project.description }}</p>
                </div>
                <div class="project-actions">
                    {% if project.readMoreUrl %}
                    <a href="{{ project.readMoreUrl }}" class="pill-button">Read More</a>
                    {% endif %}
                    {% if project.gitUrl %}
                    <a href="{{ project.gitUrl }}" class="pill-button">Self-Hosted Git</a>
                    {% endif %}
                    {% if project.gitHubUrl %}
                    <a href="{{ project.gitHubUrl }}" class="pill-button">GitHub</a>
                    {% endif %}
                </div>
            </li>
            {% endfor %}
        </ul>
    </section>
</main>
{% endblock %}