{% extends "layout/base.html" %}
{% block title %}FFGA - Trusted Community{% endblock %}
{% block content %}
<div class="container mx-auto px-6 py-16">
    <div class="max-w-4xl mx-auto">
        <h1 class="text-4xl font-bold text-gray-800 mb-8">Trusted Community</h1>
        <div class="bg-white shadow rounded-lg p-8 mb-8">
        <p class="text-gray-600 mb-6">Our trusted community consists of verified and reliable organizations that meet our strict federation requirements. These members form the backbone of the FAME federation and contribute to the ecosystem by providing valuable data assets and services.</p>
        
        <p class="text-gray-600">Being part of our trusted community means an organization has successfully passed our verification process, has been voted in by existing members, and adheres to the federation's ethical standards and compliance requirements.</p>
    </div>

    <h2 class="text-2xl font-bold text-gray-800 mb-6">Current Federation Members</h2>
    
    <!-- Contatore organizzazioni federate -->
    {% if federated_organizations %}
        <div class="bg-blue-50 border-l-4 border-blue-600 p-4 mb-6">
            <div class="flex items-center">
                <svg class="w-6 h-6 text-blue-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                </svg>
                <div>
                    <p class="text-sm text-blue-800 font-medium">Total Federated Organizations</p>
                    <p class="text-2xl font-bold text-blue-900">{{ federated_organizations|length }}</p>
                </div>
            </div>
        </div>
    {% endif %}
    
    {% if federated_organizations %}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6" style="grid-auto-rows: auto;">
            {% for org in federated_organizations %}
            <div class="bg-white shadow rounded-lg overflow-hidden self-start">
                <div class="p-6 transition-colors">
                    <div class="flex items-start space-x-4">
                        <!-- Logo (più grande come richiesto) -->
                        <div class="flex-shrink-0">
                            {% if org.logo %}
                                <img src="{{ url_for('main.serve_logo', filename=org.logo) }}" 
                                    alt="{{ org.legal_name }} logo"
                                    class="h-24 w-24 object-contain border border-gray-200 rounded p-2">
                            {% else %}
                                <div class="h-24 w-24 bg-blue-50 border border-blue-200 rounded flex items-center justify-center">
                                    <svg class="h-12 w-12 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                                    </svg>
                                </div>
                            {% endif %}
                        </div>

                        <!-- Organization Info: sempre visibile -->
                        <div class="flex-1 min-w-0">
                            <div class="flex items-start justify-between">
                                <div class="pr-4">
                                    <h3 class="text-lg font-semibold text-gray-800 mb-1">{{ org.legal_name }}</h3>

                                    <!-- Nuove righe: org_type, country, join_date, sito web -->
                                    <div class="text-sm text-gray-600 space-y-1">
                                        <!-- Organization type (human readable) -->
                                        <div>
                                            <span class="text-xs font-medium text-gray-500 uppercase">Type:</span>
                                            <span class="text-sm text-gray-800 ml-2">
                                                {% if org.org_type == 'FPO' %}
                                                    For-Profit Organization
                                                {% elif org.org_type == 'NPO' %}
                                                    Non-Profit Organization
                                                {% elif org.org_type == 'RES' %}
                                                    Research Institution
                                                {% elif org.org_type == 'EDU' %}
                                                    Educational Institution
                                                {% elif org.org_type == 'LEO' %}
                                                    Law Enforcement Organization
                                                {% elif org.org_type == 'PUB' %}
                                                    Public Administration
                                                {% elif org.org_type == 'EUP' %}
                                                    European Project
                                                {% else %}
                                                    Other
                                                {% endif %}
                                            </span>
                                        </div>

                                        <!-- Country (if available) -->
                                        <div>
                                            <span class="text-xs font-medium text-gray-500 uppercase">Country:</span>
                                            <span class="text-sm text-gray-800 ml-2 country-name"
                                                data-country-code="{% if org.legal_address and org.legal_address.country %}{{ org.legal_address.country }}{% else %}{% endif %}">
                                                {% if org.legal_address and org.legal_address.country %}
                                                    {{ org.legal_address.country }}
                                                {% else %}
                                                    N/A
                                                {% endif %}
                                            </span>
                                        </div>

                                        <!-- Join date (onboarded_at) -->
                                        <div>
                                            <span class="text-xs font-medium text-gray-500 uppercase">Joined:</span>
                                            <span class="text-sm text-gray-800 ml-2">
                                                {{ org.onboarded_at.strftime('%B %d, %Y') if org.onboarded_at else 'N/A' }}
                                            </span>
                                        </div>

                                        <!-- Website link -->
                                        {% if org.website_url %}
                                        <div>
                                            <a href="{{ org.website_url }}" target="_blank" rel="noopener noreferrer"
                                            class="inline-flex items-center text-sm text-blue-600 hover:text-blue-800 mt-1">
                                                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9"></path>
                                                </svg>
                                                Visit Website
                                            </a>
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

    {% else %}
        <div class="bg-white shadow rounded-lg p-8 text-center">
            <p class="text-gray-600">There are currently no federated organizations to display, or you may need to log in to view this information.</p>
            <p class="text-gray-600 mt-4">Interested in joining our community? <a href="{{ url_for('auth.federation') }}" class="text-blue-600 hover:text-blue-800">Apply for federation today</a>.</p>
        </div>
    {% endif %}
</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', async () => {
  // Percorso al file JSON (static)
  const countriesUrl = '/static/countries.json';

  // Recupera tutti gli elementi che contengono la sigla
  const elems = Array.from(document.querySelectorAll('.country-name'));

  if (elems.length === 0) return; // niente da fare

  try {
    const resp = await fetch(countriesUrl, {cache: "no-cache"});
    if (!resp.ok) throw new Error('Countries JSON not found');

    const countries = await resp.json();

    // Costruisci mappa alpha2 -> name, in maiuscolo per sicurezza
    const map = {};
    for (const c of countries) {
      if (c.alpha2) map[(c.alpha2 || '').toUpperCase()] = c.name;
      if (c.alpha3) map[(c.alpha3 || '').toUpperCase()] = c.name; // opzionale, se a volte hai alpha3
    }

    // Sostituisci il contenuto degli elementi
    elems.forEach(el => {
      const codeRaw = (el.getAttribute('data-country-code') || '').trim();
      if (!codeRaw) return;

      const code = codeRaw.toUpperCase();

      // Se il valore è già una stringa lunga (non prob. una sigla) lasciamolo così
      if (code.length > 3) {
        // potrebbe essere già il nome completo; non modificare
        return;
      }

      const full = map[code];
      if (full) {
        el.textContent = full;
      } else {
        // fallback: mostra la sigla (già presente) o una versione "unknown"
        // puoi anche lasciare la sigla così com'è
        // el.textContent = code; 
      }
    });

  } catch (err) {
    // Se qualcosa va storto, non blocchiamo la pagina:
    console.warn('Could not load countries.json or map country names:', err);
  }
});
</script>
{% endblock %}