{% extends 'layout.html' %}

{% block head_scripts %}{% block account_head_scripts %}{% endblock %}{% endblock %}
{% block title %}{% block account_title %}{% endblock %}{% endblock %}

{% load notifications_tags %}

{% block content %}
    <div class="row mt-2">
        <div class="col-md-3">
            <div class="bg-light border rounded">
                <div class="bg-white p-2">
                    <h5 class="m-0">My Ports</h5>
                </div>
                <div class="list-group list-group-flush">
                    <a href="{% url 'notifications' %}" class="list-group-item list-group-item-action {% if request.path == '/accounts/notifications/' %}active{% endif %}">Notifications ({% notifications_unread %})</a>
                    <a href="{% url 'my_ports' %}" class="list-group-item list-group-item-action {% if 'my_ports' in request.path %}active{% endif %}">Maintained by me</a>
                    <a href="{% url 'followed_ports' %}" class="list-group-item list-group-item-action {% if request.path == '/accounts/followed_ports/' %}active{% endif %}">Followed by me</a>
                </div>
            </div>
            <br>
            <div class="bg-light border rounded">
                <div class="bg-white p-2">
                    <h5 class="m-0">Account</h5>
                </div>
                <div class="list-group list-group-flush">
                    <a href="{% url 'account_profile' %}" class="list-group-item list-group-item-action {% if request.path == '/accounts/profile/' %}active{% endif %}">Profile</a>
                    <a href="{% url 'socialaccount_connections' %}" class="list-group-item list-group-item-action {% if request.path == '/accounts/social/connections/' %}active{% endif %}">Connected GitHub Accounts</a>
                    <a href="{% url 'account_email' %}" class="list-group-item list-group-item-action {% if request.path == '/accounts/email/' %}active{% endif %}">Connected Emails</a>
                    <a href="{% url 'account_change_password' %}" class="list-group-item list-group-item-action {% if request.path == '/accounts/password/change/' %}active{% endif %}">Change Password</a>
                    <a href="{% url 'account_logout' %}" class="list-group-item list-group-item-action {% if request.path == '/accounts/logout/' %}active{% endif %}">Logout</a>
                </div>
            </div>
        </div>
        <div class="col-md-9 pt-lg-1 pt-4">
            {% block account_content %}
            {% endblock %}
        </div>
    </div>
{% endblock %}

{% block script %}
{% block account_script %}
{% endblock %}
{% endblock %}