{% extends "base.html.jinja" %}

{% block content %}
<section class="max-w-6xl mx-auto px-4 pt-8">
    <div class="flex gap-8">
        {# Org sidebar #}
        <aside class="w-64 shrink-0">
            <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">Organisations</h2>
            <ul class="space-y-1">
                {% for org in orgs %}
                <li>
                    <a href="/orgs/{{ org.name }}/projects" class="block px-3 py-2 text-sm rounded-md hover:bg-gray-100">
                        {{ org.name }}
                        <span class="text-xs text-gray-400 ml-1">{{ org.role }}</span>
                    </a>
                </li>
                {% endfor %}
            </ul>
            <div class="mt-4 pt-4 border-t border-gray-200">
                <form method="POST" action="/orgs" class="space-y-2">
                    <input type="hidden" name="_csrf" value="{{ csrf_token }}">
                    <input type="text" name="name" placeholder="new-org-name"
                           class="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-900">
                    <button type="submit" class="w-full px-3 py-1.5 text-sm bg-gray-900 text-white rounded-md hover:bg-gray-800">
                        Create organisation
                    </button>
                </form>
            </div>
        </aside>

        {# Main content #}
        <div class="flex-1 min-w-0">
            <h1 class="text-2xl font-bold mb-6">Recent activity</h1>

            {% if recent_activity %}
            <div class="space-y-3">
                {% for item in recent_activity %}
                <a href="/orgs/{{ item.org_name }}/projects/{{ item.project_name }}" class="block p-4 border border-gray-200 rounded-lg hover:border-gray-300 transition-colors">
                    <div class="flex items-center justify-between">
                        <div class="min-w-0">
                            <p class="font-medium truncate">{{ item.title }}</p>
                            <p class="text-sm text-gray-500 mt-0.5">
                                {{ item.org_name }} / {{ item.project_name }}
                            </p>
                            {% if item.description %}
                            <p class="text-sm text-gray-600 mt-1 truncate">{{ item.description }}</p>
                            {% endif %}
                        </div>
                        <div class="text-right text-sm text-gray-400 shrink-0 ml-4">
                            <p class="font-mono text-xs">{{ item.slug }}</p>
                            <p>{{ item.created_at }}</p>
                        </div>
                    </div>
                </a>
                {% endfor %}
            </div>
            {% else %}
            <div class="p-8 border border-gray-200 rounded-lg text-center">
                <p class="text-gray-500">No recent activity</p>
                <p class="text-sm text-gray-400 mt-2">Deploy your first release with <code class="bg-gray-100 px-1 rounded">forest release create</code></p>
            </div>
            {% endif %}
        </div>
    </div>
</section>
{% endblock %}