<nav class="navbar navbar-expand-lg navbar-dark bg-dark mt-2 rounded">
    <div class="container-fluid px-3">
        <span class="navbar-text me-3 text-white">
            <strong>Question:</strong>
            {% if question.stem %}
                {{ question.stem|striptags|truncatechars:80 }}
            {% else %}
                #{{ question.pk }}
            {% endif %}
        </span>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#questionNav" aria-controls="questionNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="questionNav">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                {% if exam %}
                    <li class="nav-item">
                        {% if previous > -1 %}
                            <a class="nav-link" href="{% url 'anatomy:exam_question_detail' exam.id previous %}">Previous</a>
                        {% endif %}
                    </li>
                    <li class="nav-item align-self-center">
                        Viewing as part of exam: <a class="nav-link d-inline p-0" href="{% url 'anatomy:exam_overview' exam.id %}">{{ exam }}</a>
                        <span class="navbar-text text-muted ms-2">[{{ pos }}/{{ exam_length }}]</span>
                    </li>
                    <li class="nav-item">
                        {% if next %}
                            <a class="nav-link" href="{% url 'anatomy:exam_question_detail' exam.id next %}">Next</a>
                        {% endif %}
                    </li>
                {% endif %}
            </ul>

            <ul class="navbar-nav ms-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="questionActions" role="button" data-bs-toggle="dropdown" aria-expanded="false">Actions</a>
                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark" aria-labelledby="questionActions">
                        <li>
                            <a class="dropdown-item text-primary" href="{% url 'anatomy:question_detail' question.id %}">
                                <i class="bi bi-eye me-2"></i> View
                            </a>
                        </li>
                        {% if can_edit %}
                            <li>
                                <a class="dropdown-item text-primary" href="{% url 'anatomy:anatomy_question_update' question.id %}">
                                    <i class="bi bi-pencil-square me-2"></i> Edit
                                </a>
                            </li>

                            <li>
                                <a class="dropdown-item text-white" href="{% url 'anatomy:question_answer_update' pk=question.pk %}">
                                    <i class="bi bi-list-check me-2"></i> Edit Answers
                                </a>
                            </li>
                        {% endif %}
                        <li>
                            <a class="dropdown-item text-white" href="{% url 'anatomy:question_clone' question.id %}">
                                <i class="bi bi-files me-2"></i> Clone
                            </a>
                        </li>

                        <li>
                            <a class="dropdown-item text-info" href="#" onclick="return window.create_popup_window('{% url 'feedback_create' question_type='anatomy' pk=question.pk %}')">
                                <i class="bi bi-chat-left-text me-2"></i> Add Note
                            </a>
                        </li>

                        {% if can_edit %}
                        <li><hr class="dropdown-divider"></li>

                        <li>
                            <a class="dropdown-item text-danger" href="{% url 'anatomy:question_delete' pk=question.pk %}">
                                <i class="bi bi-trash me-2"></i> Delete
                            </a>
                        </li>
                        {% endif %}

                        {% if request.user.is_superuser %}
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <a class="dropdown-item text-warning" href="{% url 'admin:anatomy_anatomyquestion_change' question.id %}">
                                    <i class="bi bi-tools me-2"></i> Admin Edit
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item text-muted" href="{% url 'anatomy:question_user_answers' question.id %}">
                                    <i class="bi bi-people me-2"></i> User answers
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>