{% extends 'base_app.html' %}

{% block content %}
<div class="min-h-screen bg-gray-100 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
    <div class="sm:mx-auto sm:w-full sm:max-w-md">
        <div class="text-center">
            <h2 class="text-3xl font-extrabold text-gray-900">
                Kies een organisatie
            </h2>
            <p class="mt-2 text-sm text-gray-600">
                Met welk bedrijf wil je op dit moment werken?
            </p>
        </div>

        <div class="mt-8 bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
            <div class="space-y-4">
                {% for membership in memberships %}
                    <form method="post" action="{% url 'select_organization' %}">
                        {% csrf_token %}
                        <input type="hidden" name="org_id" value="{{ membership.organization.id }}">

                        <button type="submit"
                                class="w-full flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition-all group">
                            <div class="text-left">
                                <span class="block text-sm font-bold text-gray-900 group-hover:text-blue-700">
                                    {{ membership.organization.name }}
                                </span>
                                <span class="block text-xs text-gray-500 italic">
                                    Rol: {{ membership.get_role_display }}
                                </span>
                            </div>

                            <div class="text-blue-600 opacity-0 group-hover:opacity-100 transition-opacity">
                                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                                </svg>
                            </div>
                        </button>
                    </form>
                {% empty %}
                    <div class="text-center py-4">
                        <p class="text-sm text-gray-500">Je bent nog niet gekoppeld aan een organisatie.</p>
                        <a href="mailto:support@ashlarsystems.nl" class="text-blue-600 text-sm font-medium hover:underline">
                            Neem contact op met support
                        </a>
                    </div>
                {% endfor %}
            </div>

            <div class="mt-6 border-t border-gray-200 pt-6">
                <form action="{% url 'logout' %}" method="post">
                    {% csrf_token %}
                    <button type="submit" class="w-full text-center text-sm text-gray-500 hover:text-gray-700">
                        Toch liever uitloggen?
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}