{% extends "base.html.jinja" %}
{% from "components/timestamp.html.jinja" import timeago as ts %}

{% block content %}
<section class="max-w-2xl mx-auto px-4 py-12">
    {# Organisations #}
    <div class="mb-12">
        <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-4">Your organisations</h2>
        <div class="space-y-2">
            {% for org in orgs %}
            <a href="/orgs/{{ org.name }}/projects" class="flex items-center justify-between px-4 py-3 border border-gray-200 rounded-lg hover:border-gray-300 hover:bg-gray-50 transition-colors">
                <span class="font-medium text-gray-900">{{ org.name }}</span>
                <span class="text-xs text-gray-400 bg-gray-100 px-2 py-0.5 rounded">{{ org.role }}</span>
            </a>
            {% endfor %}
        </div>
        <form method="POST" action="/orgs" class="flex gap-2 mt-4">
            <input type="hidden" name="_csrf" value="{{ csrf_token }}">
            <input type="text" name="name" placeholder="new-org-name"
                   class="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-900">
            <button type="submit" class="px-4 py-2 text-sm bg-gray-900 text-white rounded-md hover:bg-gray-800 whitespace-nowrap">
                Create organisation
            </button>
        </form>
    </div>

    {# Recent activity #}
    <div>
        <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-4">Recent activity</h2>

        {% if recent_activity %}
        <div class="space-y-2">
            {% for item in recent_activity %}
            <a href="/orgs/{{ item.org_name }}/projects/{{ item.project_name }}/releases/{{ item.slug }}" class="block px-4 py-3 border border-gray-200 rounded-lg hover:border-gray-300 hover:bg-gray-50 transition-colors">
                <div class="flex items-center justify-between">
                    <div class="min-w-0 flex-1">
                        <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>
                    </div>
                    <div class="text-right shrink-0 ml-4">
                        {% if item.dest_envs %}
                        <div class="flex gap-1 mb-1 justify-end">
                            {% for env in item.dest_envs %}
                            <span class="inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full {% if 'prod' in env and 'preprod' not in env %}bg-pink-100 text-pink-800{% elif 'preprod' in env or 'pre-prod' in env %}bg-orange-100 text-orange-800{% elif 'stag' in env %}bg-yellow-100 text-yellow-800{% elif 'dev' in env %}bg-violet-100 text-violet-800{% else %}bg-gray-100 text-gray-700{% endif %}">
                                {{ env }}
                            </span>
                            {% endfor %}
                        </div>
                        {% endif %}
                        {{ ts(item.created_at, class="text-xs text-gray-400") }}
                    </div>
                </div>
            </a>
            {% endfor %}
        </div>
        {% else %}
        <div class="px-4 py-10 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.5 py-0.5 rounded">forest release create</code></p>
        </div>
        {% endif %}
    </div>
</section>
{% endblock %}