{% extends 'base.html' %}
{% load static %}
{% block title %} EXPath Tool 2.0{% endblock %}
{% block content %}
<main>
    <div class="container2">
        <div>
            <nav class="navbar navbar-light bg-light rounded py-2 shadow-sm">
                <div class="container-fluid">
                    <!-- 上方橫向教學菜單 -->
                    <ul class="navbar-nav d-flex flex-row flex-wrap justify-content-center gap-4 w-100" id="guide-menu">
                        <!-- 注意這裡：加入了 guide-btn class，以及 data- 屬性來存放英文標題與說明 -->
                        <button class="nav-link guide-btn bg-transparent border-0 fw-medium px-3 py-2 active" 
                                data-title="Project Management" 
                                data-video="{% static 'videos/project.mp4' %}">
                            Project Management
                        </button>
                        <button class="nav-link guide-btn bg-transparent border-0 fw-medium px-3 py-2" 
                                data-title="Overview" 
                                data-video="{% static 'videos/overview.mp4' %}">
                            Overview
                        </button>
                        <button class="nav-link guide-btn bg-transparent border-0 fw-medium px-3 py-2" 
                                data-title="Gene Search" 
                                data-video="{% static 'videos/gene_search.mp4' %}">
                            Gene Search
                        </button>
                        <button class="nav-link guide-btn bg-transparent border-0 fw-medium px-3 py-2" 
                                data-title="Expression Comparison" 
                                data-video="{% static 'videos/expression.mp4' %}">
                            Expression Comparison
                        </button>
                        <button class="nav-link guide-btn bg-transparent border-0 fw-medium px-3 py-2" 
                                data-title="Pathway Search" 
                                data-video="{% static 'videos/pathway.mp4' %}">
                            Pathway Search
                        </button>
                        <button class="nav-link guide-btn bg-transparent border-0 fw-medium px-3 py-2" 
                                data-title="DEGs Search" 
                                data-video="{% static 'videos/DEG.mp4' %}">
                            DEGs Search
                        </button>
                        <button class="nav-link guide-btn bg-transparent border-0 fw-medium px-3 py-2" 
                                data-title="Pathway/GO Enrichment Analysis" 
                                data-video="{% static 'videos/enrichment.mp4' %}">
                            Pathway/GO Enrichment Analysis
                        </button>
                        <button class="nav-link guide-btn bg-transparent border-0 fw-medium px-3 py-2" 
                                data-title="Coexpression Analysis " 
                                data-video="{% static 'videos/coexpression.mp4' %}">
                            Coexpression Analysis
                        </button>
                    </ul>
                </div>
            </nav>
            <!-- 下方影片與介紹區塊 -->
            <div class="video-container mt-5 mb-5">
                <div class="card mx-auto shadow-lg border-0" style="max-width: 800px; border-radius: 12px; background-color: #343a40;">
                    <div class="card-header text-center border-0 py-3" style="background-color: #2b3035; border-top-left-radius: 12px; border-top-right-radius: 12px;">
                        <h4 id="display-title" class="mb-0 text-light fw-bold letter-spacing-1">Project Management</h4>
                    </div>
                    <div class="card-body p-3 p-md-4 bg-dark">
                        <video id="main-video" class="w-100 rounded shadow-sm" controls preload="metadata" style="background-color: #000;">
                            <source id="video-source" src="{% static 'videos/project.mp4' %}" type="video/mp4">
                            Your browser does not support HTML5 video playback. Please update your browser.
                        </video>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const buttons = document.querySelectorAll('.guide-btn');
        const displayTitle = document.getElementById('display-title');
        const mainVideo = document.getElementById('main-video');
        const videoSource = document.getElementById('video-source');

        buttons.forEach(button => {
            button.addEventListener('click', function() {
                
                buttons.forEach(btn => btn.classList.remove('active'));
                this.classList.add('active');

                displayTitle.textContent = this.getAttribute('data-title');

                const newVideoSrc = this.getAttribute('data-video');
                videoSource.src = newVideoSrc;
                mainVideo.load();
                
            });
        });
    });
</script>
<style>
    /* 1. 當按鈕被選中 (active) 時，加上深灰色背景與白色文字 */
    .guide-btn.active {
        background-color: #6c757d !important; /* 深灰色 (Bootstrap secondary) */
        color: #ffffff !important;
        border-radius: 8px; /* 稍微給一點圓角，比較好看 */
    }

    /* 2. 當滑鼠移過去 (hover)，但還沒被選中時，給個極淡的灰底 */
    .guide-btn:hover:not(.active) {
        background-color: #e2e6ea;
        border-radius: 8px;
    }
</style>
{% endblock %}