{% extends "base.html" %}

{% block content %}

<!-- PAGE CONTENT -->
<div class="page-content">

    <!-- HERO SECTION -->
    <section class="bg-icon-cover">
        <div class="bg-overlay noise-texture_01"></div>
        <div class="bg-icon-container">
            <div class="bg-icon small ballotbox"></div>
        </div>
        <div class="container">

            <!-- HEADLINE -->
            <div class="row mb-lg-5 mb-md-4 mb-3">
                <div class="col-sm-12 col-9">
                    <div class="article_headline navy">
                        <h2 style="text-wrap: balance;">{{title}}</h2>
                    </div>
                </div>
            </div>
            <!-- END HEADLINE -->

            <!-- ICONS -->
            <div class="row">
                <div class="col-12">

                    <!-- ICONS DESKTOP -->
                    <div class="row d-none d-md-block align-items-end my-4">
                        <div class="col-12">
                            <div class="article_icon-container justify-content-start">
                                <button type="button" class="article_icon navy" onclick="twitterPopup()" title="Share this on X" aria-label="Share this on X" data-external="yes"><i class="twitter-x-icon-social_twitter-x"></i></button>
                                <button type="button" class="article_icon navy mx-3" onclick="facebookPopup()" title="Share this on Facebook" aria-label="Share this on Facebook" data-external="yes"><i class="heritage-icon-social_facebook"></i></button>
                                <button type="button" class="article_icon navy" onclick="copyURL()" title="Copy link" aria-label="Copy link"><i class="heritage-icon-copy_link"></i></button>
                            </div>
                        </div>
                    </div>
                    <!-- END ICONS -->

                    <!-- ICONS MOBILE -->
                    <div class="row d-md-none align-items-end my-4">
                        <div class="col-12">
                            <div class="article_icon-container justify-content-start">
                                <button type="button" class="article_icon navy mobile" onclick="twitterPopup()" title="Share this on X" aria-label="Share this on X" data-external="yes"><i class="twitter-x-icon-social_twitter-x"></i></button>
                                <button type="button" class="article_icon navy mobile mx-3" onclick="facebookPopup()" title="Share this on Facebook" aria-label="Share this on Facebook" data-external="yes"><i class="heritage-icon-social_facebook"></i></button>
                                <button type="button" class="article_icon navy mobile" id="URL" onclick="copyURL()" title="Copy link" aria-label="Copy link"><i class="heritage-icon-copy_link"></i></button>
                            </div>
                        </div>
                    </div>
                    <!-- END ICONS MOBILE -->

                </div>
            </div>
            <!-- END ICONS -->

        </div>
    </section>
    <!-- END HERO SECTION -->

    <!-- SEARCH FORM  -->
    <div class="container my-3">
        <form>

            <div class="form-row">
                <!-- KEYWORDS -->
                <div class="form-group col-md-12">
                    <label for="keywords">Keywords</label>
                    <input type="text" class="form-control custom-select mt-2" id="keywords" placeholder="Enter all keywords that apply">
                </div>
            </div>

            <div class="form-row">
                <!-- STATE -->
                <div class="form-group col-sm-6 col-12">
                    <label for="state">State</label>
                    <select id="state" class="form-control custom-select mt-2">
                    </select>
                </div>

                <!-- YEAR FROM -->
                <div class="form-group col-sm-3 col-6">
                    <label for="yearFrom">From</label>
                    <select id="yearFrom" class="form-control custom-select mt-2">
                    </select>
                </div>

                <!-- YEAR TO -->
                <div class="form-group col-sm-3 col-6">
                    <label for="yearTo">To</label>
                    <select id="yearTo" class="form-control custom-select mt-2">
                    </select>
                </div>
            </div>

            <div class="form-row">
                <!-- CASE TYPE -->
                <div class="form-group col-lg-4">
                    <label for="caseType">Case Type</label>
                    <select id="caseType" class="form-control custom-select mt-2">
                    </select>
                </div>

                <!-- FRAUD CATEGORY -->
                <div class="form-group col-lg-4">
                    <label for="category1">Fraud Category</label>
                    <select id="category1" class="form-control custom-select mt-2">
                    </select>
                </div>

                <!-- FRAUD SUB-CATEGORY -->
                <div class="form-group col-lg-4">
                    <label for="category2">Fraud Sub-category</label>
                    <select id="category2" class="form-control custom-select mt-2">
                    </select>
                </div>
            </div>

            <!-- SEARCH + RESET BUTTONS -->
            <div class="form-row justify-content-end">
                <div class="form-group col-auto">
                    <button type="button" id="resetButton" class="btn btn-sm btn-outline-primary btn-outline-cyan-web">Reset Form</button>
                    <button type="button" id="searchButton" class="btn btn-sm btn-primary btn-cyan-web">Search</button>
                </div>
            </div>

        </form>
    </div>

    <!-- SEARCH RESULTS -->
    <div class="container mb-5">

        <!-- SEARCH HEADER -->
        <div class="row">
            <div class="col">

                <!-- RESULTS COUNTER -->
                <h4>Search Results</h4>
                <h5 id="resultsCounter" class="mb-0"></h5>

                <!-- FORM CONTROLS -->
                <div class="row form-inline justify-content-between align-items-end mt-sm-0 mt-3" style="min-height: 62px;">

                    <div class="col-sm-auto col d-flex flex-column flex-sm-row">
                        <label for="sortMethod" class="mr-sm-2">Sort</label>
                        <select id="sortMethod" class="form-control custom-select w-auto mt-sm-0 mt-2">
                            <option value="yearDesc" selected>Newest to Oldest</option>
                            <option value="yearAsc">Oldest to Newest</option>
                            <option value="stateAsc">State A-Z</option>
                            <option value="stateDesc">State Z-A</option>
                        </select>
                    </div>

                    <div class="col-sm-auto col d-flex flex-column flex-sm-row justify-content-sm-end">
                        <label for="resultsPerPage" class="mr-sm-2 ml-auto ml-sm-0">Results per Page</label>
                        <select id="resultsPerPage" class="form-control custom-select ml-auto mt-sm-0 mt-2" style="max-width: 134px;">
                            <option value="10" selected>10</option>
                            <option value="20">20</option>
                            <option value="50">50</option>
                        </select>
                    </div>

                </div>

            </div>
        </div>

        <!-- RESULTS TABLE -->
        <div class="row my-3">
            <div class="col">
                <div id="resultsTable"></div>
            </div>
        </div>

        <!-- TABLE NAV -->
        <div class="row justify-content-center">
            <div class="col-auto">
                <div class="input-group d-flex justify-content-center">
                    <div class="input-group-prepend mr-2 mb-2">
                        <span class="input-group-text">Page&nbsp;<span id="pageCurrent"></span>&nbsp;of&nbsp;<span id="pageLast"></span></span>
                    </div>
                    <div class="btn-group mb-2" role="group">
                        <button type="button" value="first" class="nextPrev btn btn-outline-secondary">&lt;&lt;</button>
                        <button type="button" value="prev" class="nextPrev btn btn-outline-secondary">&lt; Previous</button>
                        <button type="button" value="next" class="nextPrev btn btn-outline-secondary">Next &gt;</button>
                        <button type="button" value="last" class="nextPrev btn btn-outline-secondary">&gt;&gt;</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- SEARCH OPTIONS BUTTONS -->
        <div class="row mt-3">
            <div class="col-12 text-center">
                <button type="button" id="saveSearch" class="btn btn-sm btn-outline-primary btn-outline-cyan-web mb-2">Copy Search to Clipboard</button>
                <button type="button" class="btn btn-sm btn-outline-primary btn-outline-cyan-web mb-2" onclick="generateCSV()">Download Search Results as CSV</button>
                <button type="button" id="printSearch" class="btn btn-sm btn-outline-primary btn-outline-cyan-web mb-2">Print Search Results</button>
            </div>
        </div>

    </div>

</div>

<!-- VFDB UTILITIES -->
<script src="{{url_for('static',filename='js/heritage-org_vfdb-search.js')}}"></script>

{% endblock %}