{% extends "common/base.html" %}
{% from "components/header.html" import header %}

{% block title %}Development Wiki - {{ super() }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/settings.css') }}?v={{ 'css/settings.css'|asset_version }}">
{% endblock %}

{% block content %}
{{ header(
    title="Development Wiki",
    description="Documentation and development resources for DocuPulse",
    icon="fa-book"
) }}

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card-header bg-white">
                <ul class="nav nav-tabs card-header-tabs" id="wikiTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="true">
                            <i class="fas fa-info-circle me-2"></i>Overview
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="architecture-tab" data-bs-toggle="tab" data-bs-target="#architecture" type="button" role="tab" aria-controls="architecture" aria-selected="false">
                            <i class="fas fa-sitemap me-2"></i>Architecture
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="models-tab" data-bs-toggle="tab" data-bs-target="#models" type="button" role="tab" aria-controls="models" aria-selected="false">
                            <i class="fas fa-database me-2"></i>Data Models
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="authentication-tab" data-bs-toggle="tab" data-bs-target="#authentication" type="button" role="tab" aria-controls="authentication" aria-selected="false">
                            <i class="fas fa-shield-alt me-2"></i>Authentication & Security
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="file-management-tab" data-bs-toggle="tab" data-bs-target="#file-management" type="button" role="tab" aria-controls="file-management" aria-selected="false">
                            <i class="fas fa-file-alt me-2"></i>File Management
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="rooms-tab" data-bs-toggle="tab" data-bs-target="#rooms" type="button" role="tab" aria-controls="rooms" aria-selected="false">
                            <i class="fas fa-door-open me-2"></i>Rooms & Permissions
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="conversations-tab" data-bs-toggle="tab" data-bs-target="#conversations" type="button" role="tab" aria-controls="conversations" aria-selected="false">
                            <i class="fas fa-comments me-2"></i>Conversations & Messaging
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="notifications-tab" data-bs-toggle="tab" data-bs-target="#notifications" type="button" role="tab" aria-controls="notifications" aria-selected="false">
                            <i class="fas fa-bell me-2"></i>Notifications & Events
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="email-tab" data-bs-toggle="tab" data-bs-target="#email" type="button" role="tab" aria-controls="email" aria-selected="false">
                            <i class="fas fa-envelope me-2"></i>Email System
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="instances-tab" data-bs-toggle="tab" data-bs-target="#instances" type="button" role="tab" aria-controls="instances" aria-selected="false">
                            <i class="fas fa-server me-2"></i>Instance Management
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="api-tab" data-bs-toggle="tab" data-bs-target="#api" type="button" role="tab" aria-controls="api" aria-selected="false">
                            <i class="fas fa-code me-2"></i>API & Integration
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="deployment-tab" data-bs-toggle="tab" data-bs-target="#deployment" type="button" role="tab" aria-controls="deployment" aria-selected="false">
                            <i class="fas fa-rocket me-2"></i>Deployment & DevOps
                        </button>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <div class="tab-content" id="wikiTabContent">
                    <!-- Overview Tab -->
                    <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
                        {% include 'wiki/tabs/overview.html' %}
                    </div>

                    <!-- Architecture Tab -->
                    <div class="tab-pane fade" id="architecture" role="tabpanel" aria-labelledby="architecture-tab">
                        {% include 'wiki/tabs/architecture.html' %}
                    </div>

                    <!-- Data Models Tab -->
                    <div class="tab-pane fade" id="models" role="tabpanel" aria-labelledby="models-tab">
                        {% include 'wiki/tabs/models.html' %}
                    </div>

                    <!-- Authentication Tab -->
                    <div class="tab-pane fade" id="authentication" role="tabpanel" aria-labelledby="authentication-tab">
                        {% include 'wiki/tabs/authentication.html' %}
                    </div>

                    <!-- File Management Tab -->
                    <div class="tab-pane fade" id="file-management" role="tabpanel" aria-labelledby="file-management-tab">
                        {% include 'wiki/tabs/file_management.html' %}
                    </div>

                    <!-- Rooms Tab -->
                    <div class="tab-pane fade" id="rooms" role="tabpanel" aria-labelledby="rooms-tab">
                        {% include 'wiki/tabs/rooms.html' %}
                    </div>

                    <!-- Conversations Tab -->
                    <div class="tab-pane fade" id="conversations" role="tabpanel" aria-labelledby="conversations-tab">
                        {% include 'wiki/tabs/conversations.html' %}
                    </div>

                    <!-- Notifications Tab -->
                    <div class="tab-pane fade" id="notifications" role="tabpanel" aria-labelledby="notifications-tab">
                        {% include 'wiki/tabs/notifications.html' %}
                    </div>

                    <!-- Email Tab -->
                    <div class="tab-pane fade" id="email" role="tabpanel" aria-labelledby="email-tab">
                        {% include 'wiki/tabs/email.html' %}
                    </div>

                    <!-- Instances Tab -->
                    <div class="tab-pane fade" id="instances" role="tabpanel" aria-labelledby="instances-tab">
                        {% include 'wiki/tabs/instances.html' %}
                    </div>

                    <!-- API Tab -->
                    <div class="tab-pane fade" id="api" role="tabpanel" aria-labelledby="api-tab">
                        {% include 'wiki/tabs/api.html' %}
                    </div>

                    <!-- Deployment Tab -->
                    <div class="tab-pane fade" id="deployment" role="tabpanel" aria-labelledby="deployment-tab">
                        {% include 'wiki/tabs/deployment.html' %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}