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

{% block title %}{% trans "Personal Center" %}{% endblock %}

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

{% block content %}
    <div class="content-card section-inner" style="padding: 0 1.25rem 1.25rem; position: relative;">
        <div style="padding-top: 1.25rem;">
            {% include 'main/_subheader.html' with title=_("Personal Center") back="/dashboard/" %}
        </div>
        <div style="border-radius:12px; overflow:hidden; background: var(--bg-card); padding:1.5rem; border: var(--border-tech); box-shadow: 0 4px 15px var(--primary-glow);">
            <div style="display:flex; gap:1rem; align-items:center;">
                <div style="width:64px; height:64px; border-radius:4px; background:var(--primary); display:grid; place-items:center; font-size:1.5rem; color:white; border: var(--border-tech); box-shadow: 0 0 10px var(--primary-glow);">👤</div>
                <div style="color:var(--text-main)">
                    <div style="font-weight:800; font-size:1.1rem; font-family:var(--font-mono);">{{ user_phone }}</div>
                    <div style="font-size:0.8rem; color:var(--primary); font-family:var(--font-mono); font-weight:bold;">UID: {{ uid }}</div>
                    {% if referral_code %}<div style="font-size:0.8rem; color:var(--text-muted); font-family:var(--font-mono); font-weight:bold;">Referral Code: <span style="color:var(--primary);">{{ referral_code }}</span></div>{% endif %}
                </div>
            </div>
            <div style="margin-top:1.5rem; background: var(--bg-page); padding:1rem; border-radius:8px; display:flex; justify-content:space-between; align-items:center; border: 1px dashed var(--primary);">
                <div>
                    <div style="color:var(--text-muted); font-size:0.75rem; text-transform:uppercase; font-family:var(--font-mono); font-weight:bold;">{% trans "Balance" %}</div>
                    <div style="font-size:1.8rem; font-weight:900; color:var(--primary); margin-top:0.25rem;">{{ balance }}</div>
                </div>
                <div style="font-size:2rem; opacity:0.8;">💰</div>
            </div>
        </div>

        <div style="display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; margin-top:1rem;">
            <a href="/deposit/" style="display:block; padding:1.25rem 1rem; border-radius:8px; background:var(--bg-elev); text-decoration:none; color:var(--text-main); border: 1px solid rgba(43, 111, 255, 0.1); box-shadow: 0 4px 10px rgba(0,0,0,0.02);">
                <div style="display:flex; align-items:center; gap:0.5rem; margin-bottom:0.5rem;">
                    <span style="font-size:1.2rem;">📥</span>
                    <span style="font-weight:800; text-transform:uppercase; font-size:0.85rem; font-family:var(--font-mono); color:var(--primary);">{% trans "Deposit" %}</span>
                </div>
                <small style="color:var(--text-muted); font-size:0.7rem;">{% trans "Online booking 50000+" %}</small>
            </a>
            <a href="/withdrawal/" style="display:block; padding:1.25rem 1rem; border-radius:8px; background:var(--bg-elev); text-decoration:none; color:var(--text-main); border: 1px solid rgba(43, 111, 255, 0.1); box-shadow: 0 4px 10px rgba(0,0,0,0.02);">
                <div style="display:flex; align-items:center; gap:0.5rem; margin-bottom:0.5rem;">
                    <span style="font-size:1.2rem;">📤</span>
                    <span style="font-weight:800; text-transform:uppercase; font-size:0.85rem; font-family:var(--font-mono); color:var(--primary);">{% trans "Withdrawal" %}</span>
                </div>
                <small style="color:var(--text-muted); font-size:0.7rem;">{% trans "Fun, easy &amp; free" %}</small>
            </a>
        </div>

        <div style="margin-top:1rem;">
            <ul style="list-style:none; padding:0; margin:0; display:grid; gap:0.5rem;">
                <a href="/level/" style="text-decoration:none; color:inherit;">
                    <li style="display:flex; justify-content:space-between; align-items:center; padding:1rem; background:var(--bg-elev); border-radius:8px; border: 1px solid rgba(43, 111, 255, 0.1);">
                        <div style="display:flex; align-items:center; gap:0.75rem;">
                            <span style="font-size:1.2rem; width:24px; text-align:center;">🏆</span>
                            <span style="font-weight:600;">{% trans "Level" %}</span>
                        </div>
                        <span style="color:var(--primary); font-weight:bold;">›</span>
                    </li>
                </a>
                <a href="/details/" style="text-decoration:none; color:inherit;">
                    <li style="display:flex; justify-content:space-between; align-items:center; padding:1rem; background:var(--bg-elev); border-radius:8px; border: 1px solid rgba(43, 111, 255, 0.1);">
                        <div style="display:flex; align-items:center; gap:0.75rem;">
                            <span style="font-size:1.2rem; width:24px; text-align:center;">🧾</span>
                            <span style="font-weight:600;">{% trans "Details" %}</span>
                        </div>
                        <span style="color:var(--primary); font-weight:bold;">›</span>
                    </li>
                </a>
                <a href="/about/" 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;">
                        <div style="display:flex; align-items:center; gap:0.75rem;">
                            <span style="font-size:1.2rem; width:24px; text-align:center;">ℹ️</span>
                            <span>{% trans "About Us" %}</span>
                        </div>
                        <span style="color:var(--text-muted)">›</span>
                    </li>
                </a>
                <a href="/certificate/" 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;">
                        <div style="display:flex; align-items:center; gap:0.75rem;">
                            <span style="font-size:1.2rem; width:24px; text-align:center;">📜</span>
                            <span>{% trans "Certificate of authenticity" %}</span>
                        </div>
                        <span style="color:var(--text-muted)">›</span>
                    </li>
                </a>
                <a href="/language/" 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;">
                        <div style="display:flex; align-items:center; gap:0.75rem;">
                            {% if request.LANGUAGE_CODE == 'de' %}
                                <img src="{% static 'flags/de.png' %}" style="width:24px; border-radius:2px;" alt="DE">
                            {% elif request.LANGUAGE_CODE == 'fr' %}
                                <img src="{% static 'flags/fr.png' %}" style="width:24px; border-radius:2px;" alt="FR">
                            {% elif request.LANGUAGE_CODE == 'it' %}
                                <img src="{% static 'flags/it.png' %}" style="width:24px; border-radius:2px;" alt="IT">
                            {% elif request.LANGUAGE_CODE == 'nl' %}
                                <img src="{% static 'flags/nl.png' %}" style="width:24px; border-radius:2px;" alt="NL">
                            {% else %}
                                <img src="{% static 'flags/us.png' %}" style="width:24px; border-radius:2px;" alt="US">
                            {% endif %}
                            <span>{% trans "Language Setting" %}</span>
                        </div>
                        <span style="color:var(--text-muted)">›</span>
                    </li>
                </a>
                <a href="/change-password/" 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;">
                        <div style="display:flex; align-items:center; gap:0.75rem;">
                            <span style="font-size:1.2rem; width:24px; text-align:center;">🔒</span>
                            <span>{% trans "Change Login Password" %}</span>
                        </div>
                        <span style="color:var(--text-muted)">›</span>
                    </li>
                </a>
                <a href="/withdrawal-pin/" 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;">
                        <div style="display:flex; align-items:center; gap:0.75rem;">
                            <span style="font-size:1.2rem; width:24px; text-align:center;">🔑</span>
                            <span>{% trans "Withdrawal PIN" %}</span>
                        </div>
                        <span style="color:var(--text-muted)">›</span>
                    </li>
                </a>
                <a href="/customer-service/" 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;">
                        <div style="display:flex; align-items:center; gap:0.75rem;">
                            <span style="font-size:1.2rem; width:24px; text-align:center;">🎧</span>
                            <span>{% trans "Customer Service" %}</span>
                        </div>
                        <span style="color:var(--text-muted)">›</span>
                    </li>
                </a>
                <a href="/help-center/" 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;">
                        <div style="display:flex; align-items:center; gap:0.75rem;">
                            <span style="font-size:1.2rem; width:24px; text-align:center;">❓</span>
                            <span>{% trans "Help Center" %}</span>
                        </div>
                        <span style="color:var(--text-muted)">›</span>
                    </li>
                </a>
                <a href="/bind-wallet/" 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;">
                        <div style="display:flex; align-items:center; gap:0.75rem;">
                            <span style="font-size:1.2rem; width:24px; text-align:center;">💳</span>
                            <span>{% trans "Bind wallet address" %}</span>
                        </div>
                        <span style="color:var(--text-muted)">›</span>
                    </li>
                </a>
                <a href="/logout/" style="text-decoration:none; color:inherit;" onclick="return confirm('Sign out?');">
                    <li style="display:flex; justify-content:space-between; align-items:center; padding:1rem; background:var(--bg-elev); border-radius:8px; border: 1px solid rgba(43, 111, 255, 0.1);">
                        <div style="display:flex; align-items:center; gap:0.75rem;">
                            <span style="font-size:1.2rem; width:24px; text-align:center;">🚪</span>
                            <span style="font-weight:600;">{% trans "Sign Out" %}</span>
                        </div>
                        <span style="color:var(--primary); font-weight:bold;">›</span>
                    </li>
                </a>
            </ul>
        </div>
    </div>
{% endblock %}