<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="UTF-8">
    <title>AEA GUI</title>

    <!-- Connect stylesheets and jquery script -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="static/css/home.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>

<body>

    <!-- Header navbar -->
    <nav class="navbar">

        <!-- Fetch.ai logo -->
        <a class="fetchai-logo navbar-brand" href="#">
            <img src="../static/logo.png" height="30" alt="">
        </a>

        <!-- Application title -->
        <span class="app-title navbar-text">
            <h4>AEA GUI</h4>
        </span>
    </nav>

    <!-- Main box container -->
    <div class="container text-white">

        <!-- Top row: Local and Registry boxes -->
        <div class="row">

            <div class="col-md">

                <!-- Local box -->
                <div class="app-box-green app-box card mt-4">
                    <div class="card-body">
                        <h4 class="text-center">Local</h4>
                        <hr>

                        <!-- Create agent form -->
                        <form class="mt-4">
                            <div class="form-row align-baseline">
                                <div class="form-group col-md-4">
                                    <label class="form-label" for="localAgentsCreateId">Create agent name</label>
                                </div>
                                <div class="form-group col-md-4">
                                    <input id="localAgentsCreateId" type="text" class="app-create-agent-input">
                                </div>
                                <div class="form-group col-md-4">
                                    <button id="localAgentsCreate" class="app-btn-m app-btn-green float-right">Create agent</button>
                                </div>
                            </div>
                        </form>

                        <hr>

                        <!-- Agents table -->
                        <h5 class="text-center">Local agents</h5>
                        <div class="localAgents">  <!-- this outer div needed for table construction by JS -->
                            <table class="table app-table-hover">
                                <thead>
                                    <th scope="col">Agent name</th>
                                    <th scope="col">Description</th>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>

                        Selected agent: <span id="localAgentsSelectionId">NONE</span>
                    </div>
                </div>

            </div>

            <div class="col-md">

                <!-- Registry box -->
                <div class="app-box-blue app-box card mt-4">
                    <div class="card-body">
                        <h4 class="text-center">Registry</h4>
                        <hr>
                        <h5 class="text-center">Search in Registry</h5>

                        <!-- Search in registry form -->
                        <form class="mt-4">

                            <!-- Item types radio row 1 -->
                            <div class="form-row">
                                <div class="form-group col-md-4">
                                    <label><input id="agent" name="itemType" type="radio" checked>Agents</label>
                                </div>
                                <div class="form-group col-md-4">
                                    <label><input id="connection" name="itemType" type="radio">Connections</label>
                                </div>
                                <div class="form-group col-md-4">
                                    <label><input id="protocol" name="itemType" type="radio">Protocols</label>
                                </div>
                            </div>

                            <!-- Item types radio row 2 -->
                            <div class="form-row">
                                <div class="form-group col-md-4"></div>  <!-- empty column -->
                                <div class="form-group col-md-4">
                                    <label><input id="contract" name="itemType" type="radio">Contracts</label>
                                </div>
                                <div class="form-group col-md-4">
                                    <label><input id="skill" name="itemType" type="radio">Skills</label>
                                </div>
                            </div>

                            <!-- Search input and submit -->
                            <div class="form-row align-baseline">
                                <div class="form-group col-md-4">
                                    <label class="form-label">Search for keywords</label>
                                </div>
                                <div class="form-group col-md-6">
                                    <input id="searchInput" type="text" class="app-search-input">
                                </div>
                                <div class="form-group col-md-2">
                                    <button id="searchInputButton" type="submit" class="app-btn-m app-btn-green float-right">Search</button>
                                </div>
                            </div>

                        </form>

                        <hr>

                        <!-- Search results table -->
                        <h5 class="text-center">Search results</h5>
                        <div class="searchItemsTable">  <!-- this outer div needed for table construction by JS -->

                            <table class="table">
                                <thead>
                                    <th scope="col-md-4"><span id="searchItemTypeTable">NONE</span> ID</th>
                                    <th scope="col-md-8">Description</th>
                                </thead>
                                <tbody></tbody>
                            </table>

                        </div>

                        <!-- Add item form -->
                        <form class="mt-4">
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label class="form-label">Selected <span id="searchItemTypeSelected">item</span>: <span id="searchItemsTableSelectionId">NONE</span></label>
                                </div>
                                <div class="form-group col-md-3">
                                    <button id="searchAgentsFetch" disabled type="submit" class="app-btn-m app-btn-blue float-right">Fetch agent</button>
                                </div>
                                <div class="form-group col-md-3">
                                    <button id="searchItemsAdd" disabled type="submit" class="app-btn-m app-btn-blue float-right">Add item</button>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>

            </div>

        </div>

        <!-- Bottom row: Agent items and Running agent boxes -->
        <div class="row">

            <div class="col-md">

                <!-- Agent items box -->
                <div class="app-box-violet app-box card mt-4">
                    <div class="card-body">

                        <!-- Local items Jinja block-->
                        {% for i in range(0, len) %}
                            {% if htmlElements[i][0] == "local" and htmlElements[i][1] != "agent" %}
                                <div class="{{htmlElements[i][2]}}">
                                    <!-- Local items table -->
                                    <h4 class="text-center"><span class="localItemHeading">NONE</span>'s {{htmlElements[i][1]}}s</h4>
                                    <table class="table table-hover">
                                        <thead>
                                            <th scope="col-md-4">{{htmlElements[i][1]}} ID</th>
                                            <th scope="col-md-8">Description</th>
                                        </thead>
                                        <tbody></tbody>
                                    </table>

                                    <!-- Remove item form -->
                                    <form class="mt-4">
                                        <div class="form-row">
                                            <div class="form-group col-md-7">
                                                <label class="form-label">Selected {{htmlElements[i][1]}}: <span id="{{htmlElements[i][2]}}SelectionId">NONE</span></label>
                                            </div>
                                            <div class="form-group col-md-5">
                                                <button  id="{{htmlElements[i][2]}}Remove" type="submit" class="app-btn-l app-btn-blue float-right">Remove item</button>
                                            </div>
                                        </div>
                                    </form>

                                </div>
                            {% endif %}
                        {% endfor %}

                    </div>
                </div>

            </div>

            <div class="col-md">

                <!-- Agent run box -->
                <div class="app-box-violet app-box card mt-4">
                    <div class="card-body">
                        <h4 class="text-center">Run "<span class="localItemHeading">NONE</span>" agent</h4>
                        <hr>

                        <!-- Start agent form -->
                        <form class="mt-4">
                            <div class="form-row">
                                <div class="form-group col-md-3">
                                    <button id="startAgent" type="submit" class="app-btn-m app-btn-blue">Start agent</button>
                                </div>
                                <!-- Currently disabled input: connection ID -->
                                <div hidden class="form-group col-md-4">
                                    <label for="runConnectionId" class="float-right">with connection ID:</label>
                                </div>
                                <div hidden class="form-group col-md-5">
                                    <input id="runConnectionId" type="text" class="app-connection-id-input float-right" id="connectionIdInput">
                                </div>
                            </div>
                        </form>

                        <!-- Stop agent form -->
                        <form class="mt-4">
                            <div class="form-row">
                                <div class="form-group col-md-3">
                                    <button id="stopAgent" type="submit" class="app-btn-m app-btn-blue">Stop agent</button>
                                </div>
                            </div>
                        </form>

                        <!-- Agent status block -->
                        <div id="agentStatus">  <!-- this outer div required for filling the agent status by JS -->
                            Agent status: NONE
                        </div>

                        <!-- Agent stdout block -->
                        <div id="agentTTY" class="app-output card-text mt-4"></div>

                        <!-- Agent stderr block -->
                        <div id="agentError" class="app-output card-text mt-4"></div>
                    </div>
                </div>

            </div>

        </div>

    </div>

    <!-- Error popup block -->
    <div class="error"><br></div>

</body>

<!-- Connect scripts -->
<script src="static/js/home.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


</html>
