{% extends "base.html" %}
{% block title %}
    {{ user.username }}
{% endblock title %}
{% block content %}
    <h2 id="username">{{ user.username }}</h2>
    <p>
        Joined <time id="date-joined">{{ user.date_joined|date:"F d, Y" }}</time>
    </p>
    <table id="user-info-table">
        <tr>
            <td>
                <strong>Date Joined:</strong>
            </td>
            <td>{{ user.date_joined|date:"F d, Y" }}</td>
        </tr>
        <tr>
            <td>
                <strong>Last Login:</strong>
            </td>
            <td>{{ user.last_login|date:"F d, Y H:i"|default:"Never" }}</td>
        </tr>
        <tr>
            <td>
                <strong>Email:</strong>
            </td>
            <td>{{ user.email|default:"Not provided" }}</td>
        </tr>
    </table>
    <a id="logout-link" href="{% url 'accounts:logout' %}">Logout</a>
    <h2>Will get notifications for these subscriptions:</h2>
    <h3 id="games-subscriptions-header">Games</h3>
    <ul id="games-subscriptions-list">
        {% for item in games_with_inheritance %}
            <li id="game-subscription-{{ item.game.id }}">
                <a href="{% url 'twitch:game_detail' item.game.id %}">{{ item.game.display_name }}</a>
                {% if item.is_inherited %}
                    <span style="font-size: 0.85em; color: #666; font-style: italic;">(inherited from {{ item.inherited_from }})</span>
                {% endif %}
            </li>
        {% empty %}
            <li>You have no game subscriptions yet.</li>
        {% endfor %}
    </ul>
    <h3 id="org-subscriptions-header">Organizations</h3>
    <ul id="org-subscriptions-list">
        {% for subscription in org_subscriptions %}
            <li id="org-subscription-{{ subscription.organization_id }}">
                <a href="{% url 'twitch:organization_detail' subscription.organization_id %}">{{ subscription.organization.name }}</a>
            </li>
        {% empty %}
            <li>You have no organization subscriptions yet.</li>
        {% endfor %}
    </ul>
{% endblock content %}