{% extends 'main/base.html' %}
{% load i18n %}

{% block title %}{% trans "About Us" %} - ODEON{% endblock %}

{% block top_icon %}
    <a href="/personal/" class="top-icon-btn">👤</a>
{% endblock %}

{% block content %}
    <div class="content-card section-inner" style="max-width: 520px; margin: 0 auto; position: relative;">
        {% include 'main/_subheader.html' with title=_("About Us") back="/personal/" %}

        <div style="margin-bottom: 1rem;">
            <div style="color: var(--text-main); font-weight: 700; font-size: 1rem;">{% trans "Check version" %}</div>
            <div style="color: var(--text-muted); font-size: 0.8rem; margin-top: 0.25rem;">5.0.13000</div>
        </div>

        <ul style="list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem;">
            <a href="/about-us/" style="text-decoration: none; color: inherit;">
                <li style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: rgba(255,255,255,0.02); border-radius: 12px; font-weight: 600;">{% trans "About Us" %} <span style="color: #9ca3af;">›</span></li>
            </a>
            <a href="/agreement/" style="text-decoration: none; color: inherit;">
                <li style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: rgba(255,255,255,0.02); border-radius: 12px; font-weight: 600;">{% trans "Agreement" %} <span style="color: #9ca3af;">›</span></li>
            </a>
            <a href="/privacy/" style="text-decoration: none; color: inherit;">
                <li style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: rgba(255,255,255,0.02); border-radius: 12px; font-weight: 600;">{% trans "Privacy" %} <span style="color: #9ca3af;">›</span></li>
            </a>
        </ul>
    </div>
{% endblock %}