{% extends 'base.html' %}
{% block title %}HEIN LAB | Help Page{% endblock %}


{% block body %}
    <h2>FAQs</h2>
    <div class="accordion accordion-flush" id="helpPage" >

        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#overall" aria-expanded="false" aria-controls="helpPageControl">
                    General information - What can this app do?
                </button>
            </h2>
            <div id="overall" class="accordion-collapse collapse" data-bs-parent="#helpPage">
                <div class="accordion-body">
                    <p>This is a web-based Graphical User Interface (GUI) for controlling Python-driven instruments in the Hein Lab.
                        This GUI also provides a visual programming tool for customizing automation workflow with no or low coding.</p>
{#                    <p>Controller: single instrument mode and multi-instrument interface.</p>#}
{#                    <p>Workflow editor: automation workflow editor#}
                </div>
            </div>
        </div>
{#        <p>In the Controller tab, you can connect any instrument or instruments from a complete automation deck. The GUI will parse and show available functions and prompt user to the input argument values if need.</p>#}
{#        <p>In the Build Workflow tab, you can edit your own automation workflow from scratch or from the workflow library, where stores the ongoing projects and some basic example workflows.</p>#}

        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#controller" aria-expanded="false" aria-controls="helpPageControl">
                    Controller - How to use controller interface?
                </button>
            </h2>
            <div id="controller" class="accordion-collapse collapse" data-bs-parent="#helpPage">
                <div class="accordion-body">
                    <p>There are 2 options of connecting instrument:</p>
                    <p>(1)     Import a python script where devices are connected using Deck Deice tab (e.g. applied to a complete automation deck with a deck.py file).</p>
                    <p>(2)     Connect devices in the web app using New Deice tab. There are builtin instruments, but you can always import your own API.</p>
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#deck" aria-expanded="false" aria-controls="helpPageControl">
                    Controller- Connect devices using deck.py file
                </button>
            </h2>
            <div id="deck" class="accordion-collapse collapse" data-bs-parent="#helpPage">
                <div class="accordion-body">
                    <p>When there are multiple instruments to connect, a deck file that had created the connection might be a better choice. Here is a sample deck.py file for a two-pump system</p>
                    <pre ><code class="python" >{{ sample_deck }}</code></pre>
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#connect-device" aria-expanded="false" aria-controls="helpPageControl">
                    Controller - Connect device in the app
                </button>
            </h2>
            <div id="connect-device" class="accordion-collapse collapse" data-bs-parent="#helpPage">
                <div class="accordion-body">
                    <p>wip</p>
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#library" aria-expanded="false" aria-controls="helpPageControl">
                    Script Editor - Library
                </button>
            </h2>
            <div id="library" class="accordion-collapse collapse" data-bs-parent="#helpPage">
                <div class="accordion-body">
                    <p>In "Library" Tab, the interactive database displays all workflow information</p>
                    <p>On top of the library page, you can click filter to choose your desired deck out of other automation platforms. You can also search for experiment keyword on the right</p>
                    <p>Note that you can edit/delete your own workflow anytime, but in case you would like to adapt other author's workflow, you need to save as your own in a different file name.</p>
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#editor" aria-expanded="false" aria-controls="helpPageControl">
                    Script Editor - How to use script editor?
                </button>
            </h2>
            <div id="editor" class="accordion-collapse collapse" data-bs-parent="#helpPage">
                <div class="accordion-body">
                    <p>You can browse and load other's workflow in "Library" Tab or go to "Build Workflow" Tab to build from scratch.</p>
                    <p>On the workflow canvas, there are three coding blocks: Prep, Experiment and Clean up. As the names indicated, the Prep and Clean up are steps taken prior and after to the main experiment, they cannot be repeated. On the other hand, the Experiment section can be repeated by a designated times or <a href="#config">a .csv configuration file</a></p>
                    <p>On the left panel, you can choose the deck profile on the top, and browse deck action and builtin python functions. Click to input your argument and add to the canvas, then drag the action to change their order.</p>
                    <img src="{{url_for('static', filename='gui_annotation/Slide1.PNG')}}">
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#editor-advanced" aria-expanded="false" aria-controls="helpPageControl">
                    Script Editor - How to save data and configure reaction?
                </button>
            </h2>
            <div id="editor-advanced" class="accordion-collapse collapse" data-bs-parent="#helpPage">
                <div class="accordion-body">

                    <img src="{{url_for('static', filename='gui_annotation/Slide2.PNG')}}">
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#config" aria-expanded="false" aria-controls="helpPageControl">
                    Run my script - How to execute my workflow?
                </button>
            </h2>
            <div id="config" class="accordion-collapse collapse" data-bs-parent="#helpPage">
                <div class="accordion-body">
                    <p>For workflow with no configuration, simply input repeat times to run.</p>
                    <p>To configure your workflow using csv file, check the instruction below</p>
                    <img src="{{url_for('static', filename='gui_annotation/Slide3.PNG')}}">
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#install" aria-expanded="false" aria-controls="helpPageControl">
                    Supports - Installation
                </button>
            </h2>
            <div id="install" class="accordion-collapse collapse" data-bs-parent="#helpPage">
                <div class="accordion-body">
                    If you want to install this on a new computer, follow the instructions below
                    Link to installation documentation
{#                    <img src="{{url_for('static', filename='gui_annotation/installation_guide.PNG')}}">#}

{#                    <object webui_data="{{ url_for('static', filename='setup-help.pdf')}}" type="application/pdf" style="min-height:80vh;width:100%"></object>#}
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#debug" aria-expanded="false" aria-controls="helpPageControl">
                    Supports - Debugs help
                </button>
            </h2>
            <div id="debug" class="accordion-collapse collapse" data-bs-parent="#helpPage">
                <div class="accordion-body">
                    Here are some common error messages and possible fixes.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#more" aria-expanded="false" aria-controls="helpPageControl">
                    wip
                </button>
            </h2>
            <div id="more" class="accordion-collapse collapse" data-bs-parent="#helpPage">
                <div class="accordion-body">
                    wip
                </div>
            </div>
        </div>
    </div>
{% endblock %}
