{% block pre_head %}
<!DOCTYPE html>
<html lang="en">
{% endblock %}  
<head>
{% block head_meta %}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
{% endblock %}
{% block head_title %}
    <title>MindRoot Agent Host</title>
{% endblock %}

{% block head_css %}
    <link rel="stylesheet" href="/home/static/css/reset.css">
    <link rel="stylesheet" href="/home/static/css/default.css">
    <link rel="stylesheet" href="/home/static/css/home.css">
    <link rel="stylesheet" href="/home/static/css/enhanced.css">
    <link rel="icon" href="/imgs/logo.png">
{% endblock %}

{% block head_css_end %}

<! -- Custom CSS -->
{% endblock %}
{% block head_scripts %}

{% endblock %}

</head>
<body>
{% block body_start %}

{% endblock %}

{% block header %}

{% endblock %}

{% block body_left %}
{% endblock %}

{% block body_main %}
    <main class="agent-container">
        <img src="/imgs/logo.png" alt="MindRoot Logo" class="logo">
        
        <h1>MindRoot Agent Host</h1>
        
        <a href="/admin" class="admin-link" aria-label="Admin Panel">Admin</a>
        <a href="/manual/index.html" class="docs-link" aria-label="Documentation" style="margin-left: 1rem;">Documentation</a>

        <h2>Click an Agent to Start a Chat Session:</h2>
        
        <div class="agent-list" role="list">
            {% for agent_persona in agents_with_personas %}
            <a href="/agent/{{ agent_persona.name }}" class="agent-link" role="listitem" target="_blank">
                {% set persona_path = agent_persona.persona %}
                {% set has_faceref = false %}
                {% if agent_persona.agent_data and agent_persona.agent_data.persona and agent_persona.agent_data.persona.faceref %}
                    {% set has_faceref = true %}
                {% endif %}
                {% if has_faceref %}
                    <img src="/chat/personas/{{ persona_path }}/faceref.png" alt="{{ agent_persona.name }} avatar" class="agent-avatar" onerror="this.src='/chat/personas/{{ persona_path }}/avatar.png'; this.onerror=function(){this.src='/chat/static/assistant.png'}">
                {% else %}
                    <img src="/chat/personas/{{ persona_path }}/avatar.png" alt="{{ agent_persona.name }} avatar" class="agent-avatar" onerror="this.src='/chat/static/assistant.png'">
                {% endif %}
                <div class="agent-info">
                    <span class="agent-status" aria-hidden="true"></span>
                    <span class="agent-name">{{ agent_persona.name | replace('_', ' ') }}</span>
                </div>
            </a>
            {% endfor %}
        </div>
    </main>
{% endblock %}

{% block body_right %}
{% endblock %}

{% block footer %}

{% endblock %}

{% block body_end %}

    <script src="/home/js/lit-html/lit-html.js"></script>
    <script src="/home/js/base.js"></script>
{% endblock %}
</body>
</html>
