{% extends "base.html" %}
{% block content %}

<!-- Page-specific CSS for home page -->
<link
  rel="stylesheet"
  href="{{ url_for('static', filename='css/tools.css') }}"
/>
<!-- Marked.js for Markdown rendering -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>


<section class="container py-md-5 py-3 d-flex flex-column min-vh-100">
    <!-- Page Title and Description -->
    <div class="">
        <h1><span class="text-vhpblue" id="collection-name">Methods</span></h1>
        <p class="text-secondary fs-5"> Explore methods developed by and/or used in VHP4Safety. </p>
        <p>You can search for a method that you know using the search box below. Alternatively, you can filter the methods with respect to the <a class="link-vhpblue text-decoration-none" href="{{ url_for('workflows') }}#about-section">case studies' flow step</a> that they belong to and/or the regulatory question that they are associated with. Use the "Filters" button to show filter options, then "OK" to see results, and click "X" to reset the filters.</p>

    </div>

    <nav class="navbar navbar-expand-lg d-inline">
        <form method="GET" action="{{ url_for('methods') }}" class="d-flex" role="search" id="search-form">
            <input type="text" class="form-control me-2" name="search" id="search-input" value="{{ request.args.get('search', '') }}" placeholder="Search by method name..." />
            <!-- Hidden inputs for filters -->
            <input type="hidden" name="stage" id="filter_stage" value="{{ request.args.get('stage', '') }}" />
            <input type="hidden" name="reg_q" id="filter_reg_q" value="{{ request.args.get('reg_q', '') }}" />
            <div class="btn-group" role="group" aria-label="Search and filter buttons">
                <button type="submit" class="btn btn-outline-vhpblue">Search</button>
                <a href="{{ url_for('methods') }}" class="btn btn-outline-danger text-nowrap">Clear</a>
                <button type="button" id="filter-toggle-btn" class="btn btn-outline-secondary">Filters</button>
            </div>
        </form>
        
        <!-- Filter Panel -->
        <div id="filter-panel" class="card bg-light p-3 mt-2" style="display: none;">
            <div class="gap-2 pb-1">
                <!-- Case Study Dropdown -->
                <div class="btn-group mb-1">
                    <button class="btn btn-sm btn-vhppink-distinct dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
                        Case Study
                    </button>
                    <ul class="dropdown-menu">
                        {% for slug in case_studies %}
                          <li><a class="dropdown-item text-wrap text-md-nowrap" href="#" data-filter-type="case-study" data-filter-value="{{ slug|title }}" data-case-slug="{{ slug }}">{{ slug|title }}</a></li>
                        {% endfor %}
                    </ul>
                </div>

                <!-- Regulatory Questions Dropdown -->
                <div class="btn-group mb-1">
                    <button class="btn btn-sm btn-vhppink-distinct dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
                        Regulatory Question
                    </button>
                    <ul class="dropdown-menu">
                        {% for question in reg_questions.keys() %}
                          <li><a class="dropdown-item text-wrap text-md-nowrap" href="#" data-filter-type="reg-question" data-filter-value="{{ question }}" data-applies-to-case-slug="{{ reg_question_cases.get(question, '') }}"{% if question in reg_question_explanations %} data-bs-toggle="methodtip" data-bs-placement="right" data-bs-title="{{ reg_question_explanations[question] }}"{% endif %}>{{ question }}{% if question in reg_question_explanations %} <i class="bi bi-question-circle text-vhpblue"></i>{% endif %}</a></li>
                        {% endfor %}
                    </ul>
                </div>

                <!-- Flow Step Dropdown -->
                <div class="btn-group mb-1">
                    <button class="btn btn-sm btn-vhppurple dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
                        Flow Step
                    </button>
                    <ul class="dropdown-menu">
                        {% for stage in stages %}
                          <li><a class="dropdown-item text-wrap text-md-nowrap" href="#" data-filter-type="flow-step" data-filter-value="{{ stage }}"{% if stage in stage_explanations %} data-bs-toggle="methodtip" data-bs-placement="right" data-bs-title="{{ stage_explanations[stage] }}"{% endif %}>{{ stage }}{% if stage in stage_explanations %} <i class="bi bi-question-circle text-vhpblue"></i>{% endif %}</a></li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            
            <!-- Selected Filters Display -->
            <div id="selected-filters" class="input-group">
                <span class="input-group-text d-none d-md-flex" id="filters_label">Selected Filters: <i class="bi bi-question-circle text-vhpblue ms-1" data-bs-toggle="methodtip" data-bs-placement="right" data-bs-title="Multiple selections in one category match any (OR); combining categories requires all (AND)."></i></span>
                <div id="filter-tags"
                    class="form-control d-flex flex-wrap align-items-center gap-2 rounded-start rounded-start-md-0"
                    aria-describedby="filters_label"
                    role="group">
                </div>
                <button id="apply-filter-btn" class="btn btn-vhpblue" aria-label="Apply filters" title="Apply filters"><i class="bi bi-check-lg" aria-hidden="true"></i></button>
                <button id="clear-filter-btn" class="btn btn-outline-danger" aria-label="Clear filters" title="Clear filters"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
            </div>
        </div>
    </nav>

    <!-- Pagination (top) -->
    {% include "_pagination.html" %}

    <!-- Methods List -->
    <div class="results-section">
        <ul class="results-list p-0 mb-0">
            {% for item in methods %}
                <div class="card">
                    <div class="card-body">
                        <h2 class="card-title">{{ item.service }}</h2>
                        <p id="desc" class="card-text">{{ item.description }}</p>
                    </div>
                    <div class="card-footer bg-white border-0 py-3">

                        <div class="btn-group d-flex" role="group" aria-label="Method example">

                             <!-- Catalog Page -->
                            <a href="{{ url_for('methods') }}/{{ item.id }}"  class="btn btn-vhpblue flex-grow-1"  data-bs-toggle="methodtip" data-bs-title="View method details"><i class="bi bi-info-circle"></i></a>
                 

                            <!-- Method Webpage -->
                            {% if item.main_url == "no_url" %}
                                <a type="button" class="btn btn-outline-vhpblue disabled" data-bs-toggle="methodtip" data-bs-title="No webpage available"><i class="bi bi-box-arrow-up-right"></i></a>
                            {% else %}
                                <a type="button" href="{{ item.main_url }}" class="btn btn-outline-vhpblue" target="_blank" data-bs-toggle="methodtip" data-bs-title="Visit main webpage"><i class="bi bi-box-arrow-up-right"></i></a>
                            {% endif %}

                            <!-- Meta-Data 
                            <button type="button" class="btn btn-outline-vhpblue" data-bs-toggle="methodtip" data-bs-title="View metadata (.md)" onclick="showMetadata('{{ item.meta_data }}', '{{ item.service }}')"><i class="bi bi-list-ul"></i></button>-->
                        </div>
                    </div>
                </div>
            {% else %}
                <li style="list-style: none;">
                    <div class="card alert alert-warning mb-0 justify-content-center align-items-center">No methods found</div>
                </li>
            {% endfor %}
        </ul>
    </div>

    <!-- Pagination at bottom -->
    {% with extra_class="mt-auto py-3" %}
        {% include "_pagination.html" %}
    {% endwith %}
</section>

<script src="/static/js/search_filter.js"></script>
<script>
    // Initialize search and filter functionality for methods catalog
    document.addEventListener('DOMContentLoaded', () => {
        SearchFilter.init({
            filterTypes: ['case-study', 'reg-question', 'flow-step'],
            multiSelect: true, // Multiple selections per category
            multipleInputs: true, // Create separate hidden input for each value
            initialFilters: {
                'case-study': [{% for c in selected_case_studies %}'{{ c }}'{% if not loop.last %}, {% endif %}{% endfor %}],
                'flow-step': [{% for stage in selected_stages %}'{{ stage }}'{% if not loop.last %}, {% endif %}{% endfor %}],
                'reg-question': [{% for question in selected_questions %}'{{ question }}'{% if not loop.last %}, {% endif %}{% endfor %}]
            },
            filterFieldMap: {
                'case-study': 'case_study',
                'flow-step': 'stage',
                'reg-question': 'reg_q'
            },
            filterLabels: {
                'case-study': 'Case Study',
                'flow-step': 'Flow Step',
                'reg-question': 'Reg. Q'
            },
            badgeClass: 'badge rounded-pill text-bg-vhpblue',
            filterColors: {
                'case-study': 'vhppink-distinct',
                'reg-question': 'vhppink-distinct',
                'flow-step': 'vhppurple',
            },
            tooltipSelector: '[data-bs-toggle="methodtip"]',
            showFilterPanel: {% if selected_case_studies or selected_stages or selected_questions %}true{% else %}false{% endif %}
        });
    });
</script>

<script src="/static/js/metadata_modal.js"></script><!-- Metadata Modal -->
<div class="modal fade" id="metadataModal" tabindex="-1" aria-labelledby="metadataModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="metadataModalLabel">Metadata</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div id="metadata-loading" class="text-center py-4">
          <div class="spinner-border text-vhpblue" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
          <p class="mt-2">Loading metadata...</p>
        </div>
        <div id="metadata-error" class="alert alert-warning" style="display: none;" role="alert"></div>
        <div id="metadata-content" class="bg-light p-3 rounded" style="display: none; max-height: 500px; overflow-y: auto;"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-vhpblue" onclick="downloadMetadata()">
          <i class="bi bi-download me-1"></i>Download MD file
        </button>
      </div>
    </div>
  </div>
</div>

{% endblock %}