<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}Mimir - Methodology Management{% endblock %}</title>
<!-- Bootstrap 5.3.8 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
crossorigin="anonymous">
<!-- Font Awesome Pro -->
<script src="https://kit.fontawesome.com/600fa45ed9.js" crossorigin="anonymous"></script>
<!-- HTMX -->
<script src="https://unpkg.com/htmx.org@2.0.4"
integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+"
crossorigin="anonymous"></script>
{% block extra_css %}{% endblock %}
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" data-testid="main-navbar">
<div class="container-fluid">
<a class="navbar-brand" href="/" data-testid="navbar-brand"
data-bs-toggle="tooltip" data-bs-placement="bottom"
title="Go to Mimir home page">
<i class="fas fa-book-sparkles"></i> Mimir
</a>
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<!-- Active state: Add 'active' class when on current section -->
<!-- Use request.path check for top-level pages, check path contains for sections with sub-pages -->
<!-- Add aria-current="page" for accessibility when active -->
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link {% if request.path == '/dashboard/' or request.resolver_match.url_name == 'dashboard' %}active{% endif %}"
href="/dashboard/"
data-testid="nav-dashboard"
data-bs-toggle="tooltip" data-bs-placement="bottom"
title="View your overview and key metrics"
{% if request.path == '/dashboard/' or request.resolver_match.url_name == 'dashboard' %}aria-current="page"{% endif %}>
<i class="fas fa-gauge"></i> Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link {% if '/playbooks/' in request.path %}active{% endif %}"
href="/playbooks/"
data-testid="nav-playbooks"
data-bs-toggle="tooltip" data-bs-placement="bottom"
title="Browse and manage your engineering playbooks"
{% if '/playbooks/' in request.path %}aria-current="page"{% endif %}>
<i class="fas fa-book-sparkles"></i> Playbooks
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'workflow_global_list' %}" data-testid="nav-workflows"
data-bs-toggle="tooltip" data-bs-placement="bottom"
title="View all workflows across your playbooks"
{% if '/workflows/' in request.path %}aria-current="page"{% endif %}>
<i class="fas fa-diagram-project"></i> Workflows
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" data-testid="nav-phases"
data-bs-toggle="tooltip" data-bs-placement="bottom"
title="Coming soon: Manage workflow phases">
<i class="fas fa-bars-progress"></i> Phases
</a>
</li>
<li class="nav-item">
<a class="nav-link {% if '/activities/' in request.path %}active{% endif %}"
href="{% url 'activity_global_list' %}"
data-testid="nav-activities"
data-bs-toggle="tooltip" data-bs-placement="bottom"
title="View all activities across your playbooks and workflows"
{% if '/activities/' in request.path %}aria-current="page"{% endif %}>
<i class="fas fa-list-check"></i> Activities
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" data-testid="nav-artifacts"
data-bs-toggle="tooltip" data-bs-placement="bottom"
title="Coming soon: Manage artifacts and deliverables">
<i class="fas fa-gift"></i> Artifacts
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" data-testid="nav-roles"
data-bs-toggle="tooltip" data-bs-placement="bottom"
title="Coming soon: Define and assign roles">
<i class="fas fa-brain"></i> Roles
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" data-testid="nav-howtos"
data-bs-toggle="tooltip" data-bs-placement="bottom"
title="Coming soon: Browse how-to guides">
<i class="fas fa-hand-holding-magic"></i> Howtos
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" data-testid="nav-pips"
data-bs-toggle="tooltip" data-bs-placement="bottom"
title="Coming soon: Global PIPs list (currently accessed via Playbook tabs)">
<i class="fas fa-lightbulb"></i> PIPs
</a>
</li>
</ul>
<ul class="navbar-nav ms-auto">
{% if user.is_authenticated %}
<li class="nav-item d-flex align-items-center me-3 position-relative">
<form class="d-flex" method="get" action="{% url 'global_search' %}"
data-testid="global-search-form"
hx-get="{% url 'global_search_suggestions' %}"
hx-trigger="keyup changed delay:300ms from:#global-search-input"
hx-target="#global-search-suggestions-container"
hx-include="closest form">
<input
class="form-control form-control-sm me-2"
type="search"
name="q"
placeholder="Search..."
aria-label="Global search"
data-testid="global-search-input"
id="global-search-input"
/>
<button class="btn btn-sm btn-outline-light" type="submit">
<i class="fas fa-search"></i>
</button>
</form>
<div id="global-search-suggestions-container"></div>
</li>
<li class="nav-item d-flex align-items-center">
<span class="navbar-text me-2" data-testid="user-display">
<i class="fas fa-user"></i> {{ user.username }}
</span>
<a class="btn btn-sm btn-outline-light" href="{% url 'logout' %}" data-testid="logout-link"
data-bs-toggle="tooltip" data-bs-placement="bottom"
title="Sign out of your Mimir session">
<i class="fas fa-sign-out-alt"></i> Logout
</a>
</li>
{% else %}
<li class="nav-item">
<a class="btn btn-sm btn-outline-light" href="{% url 'login' %}" data-testid="login-link"
data-bs-toggle="tooltip" data-bs-placement="bottom"
title="Sign in to access Mimir features">
<i class="fas fa-sign-in-alt"></i> Login
</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<!-- Messages -->
{% if messages %}
<div class="container mt-3">
{% for message in messages %}
<div class="alert alert-{{ message.tags }} alert-dismissible fade show"
role="alert"
data-testid="alert-message">
{{ message }}
<button type="button"
class="btn-close"
data-bs-dismiss="alert"
aria-label="Close"
data-bs-toggle="tooltip" data-bs-placement="left"
title="Dismiss this message"></button>
</div>
{% endfor %}
</div>
{% endif %}
<!-- Main Content -->
<main class="container-fluid mt-4">
{% block content %}{% endblock %}
</main>
<!-- Footer -->
<footer class="footer mt-auto py-3 bg-light">
<div class="container text-center">
<span class="text-muted">
<i class="fas fa-book-sparkles"></i> Mimir - Your Self-Evolving Engineering Playbook
</span>
</div>
</footer>
<!-- Bootstrap 5.3.8 JS Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"></script>
<!-- Initialize Bootstrap Tooltips -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Initialize all tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
});
</script>
{% block extra_js %}{% endblock %}
</body>
</html>
