{% extends "frontend/base.html" %}
{% load i18n static %}
{% block html_title %}
    {% block page_title %}
        {% translate "Welcome to Servala" %}
    {% endblock page_title %}
{% endblock html_title %}
{% block content %}
    <section class="section">
        {% if not user_organizations %}
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">{% translate "Welcome to Servala!" %}</h4>
                        </div>
                        <div class="card-content">
                            <div class="card-body text-center">
                                <div class="mb-4">
                                    <i class="bi bi-building fs-1 text-primary"></i>
                                </div>
                                <h5 class="mb-3">{% translate "Get Started with Your First Organization" %}</h5>
                                <p class="text-muted mb-4">
                                    {% blocktranslate trimmed %}
                                        Organizations help you manage your services and resources.
                                        Create your first organization to start using Servala's service catalog.
                                    {% endblocktranslate %}
                                </p>
                                <div class="d-grid gap-2 d-md-flex justify-content-md-center">
                                    <a href="{% url 'frontend:organization.create' %}"
                                       class="btn btn-primary btn-lg">
                                        <i class="bi bi-plus-circle me-2"></i>
                                        {% translate "Create Organization" %}
                                    </a>
                                </div>
                                <div class="mt-5 pt-4 border-top">
                                    <h6 class="text-muted mb-3">{% translate "Next Steps" %}</h6>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="text-center">
                                                <i class="bi bi-1-circle fs-2 text-success mb-2"></i>
                                                <h6>{% translate "Create Organization" %}</h6>
                                                <small class="text-muted">{% translate "Set up your workspace" %}</small>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="text-center">
                                                <i class="bi bi-2-circle fs-2 text-info mb-2"></i>
                                                <h6>{% translate "Discover Services" %}</h6>
                                                <small class="text-muted">{% translate "Browse available services" %}</small>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="text-center">
                                                <i class="bi bi-3-circle fs-2 text-warning mb-2"></i>
                                                <h6>{% translate "Create Instances" %}</h6>
                                                <small class="text-muted">{% translate "Deploy your first service" %}</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% else %}
            <div class="row justify-content-center">
                {% for organization in user_organizations %}
                    <div class="col-md-6 col-lg-4 mb-4">
                        <div class="card h-100 border-2 organization-card">
                            <div class="card-body d-flex flex-column">
                                <div class="text-center mb-3">
                                    <i class="bi bi-building fs-1 text-primary"></i>
                                </div>
                                <h5 class="card-title text-center mb-3">{{ organization.name }}</h5>
                                <div class="flex-grow-1">
                                    <div class="d-flex justify-content-between">
                                        <small class="text-muted">
                                            <i class="bi bi-server me-1"></i>
                                            {{ organization.instance_count }}
                                            {% blocktranslate trimmed count count=organization.instance_count %}
                                                instance
                                            {% plural %}
                                                instances
                                            {% endblocktranslate %}
                                        </small>
                                        <small class="text-muted">
                                            <i class="bi bi-people me-1"></i>
                                            {{ organization.members.count }}
                                            {% blocktranslate trimmed count count=organization.members.count %}
                                                member
                                            {% plural %}
                                                members
                                            {% endblocktranslate %}
                                        </small>
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <a href="{% url 'frontend:organization.dashboard' organization=organization.slug %}"
                                       class="btn btn-primary w-100">{% translate "Enter Organization" %}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
                <div class="text-center mt-4 pt-4 border-top"></div>
            </div>
        {% endif %}
    </section>
{% endblock content %}
