{% extends 'template/template.j2.html' %} {% block title %} {{
$t('sidebar.info') }} 
{% endblock %} 

{% block content %}
<div class="space-y-6">
  <!-- Page Header -->
  

  <!-- Server Info Accordions -->
  <div class="space-y-3">
    {% for key, value in server %}
    <details class="animate-details group rounded-xl border border-gray-200 bg-white shadow-lg">
      <summary class="flex cursor-pointer list-none items-center justify-between gap-3 px-6 py-4 transition-colors duration-150">
        <div class="flex items-center gap-3">
          <div class="h-2 w-2 rounded-full bg-blue-600"></div>
          <b class="text-base font-semibold text-gray-800">{{ $t('finchInfo.key', {'key': key}) }}</b>
        </div>
        <svg class="h-5 w-5 text-gray-500 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </summary>

      <div class="px-6 pb-5 pt-0">
        <div class="space-y-3">
          {% for info, details in value | items() %}
          <div class="rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-white p-4">
            <b class="block text-sm font-semibold text-gray-800">{{ $t('finchInfo.info', {'info': info}) }}</b>
            <p class="mt-2 text-sm text-gray-700 pl-3 border-l-2 border-blue-500">{{ $t('finchInfo.details', {'details': details}) }}</p>
          </div>
          {% endfor %}
        </div>
      </div>
    </details>
    {% endfor %}
  </div>
</div>
{% endblock %}