{% extends "layout.html" %}
{% set active_page = "tentacles" %}
<script src="{{ url_for('static', filename='js/components/tentacles.js') }}"></script>
{% block body %}
<br>
<div class="card">
    <div class="card-header">
        <h1>
            <span class="float-left">
                <a href="{{ url_for('tentacles') }}">
                    <i class="fas fa-arrow-left"></i>
                </a>
            </span>
            &ensp;Tentacle Packages
            <a class="float-right text-danger" target="_blank" rel="noopener noreferrer" href="https://github.com/Drakkar-Software/OctoBot/wiki/Tentacle-Manager#add-new-tentacles-packages-to-your-octobot">
                <i class="fa fa-question"></i>
            </a>
        </h1>
    </div>
</div>
<br>
<div class="card">
    <div class="card-header"><h2>
        Registered tentacles packages
    </h2></div>
    <div class="card-body">
        <table class="table table-striped table-bordered table-sm table-hover" id="tentacles_packages_table">
          <thead>
            <tr>
                <th scope="col">Package Name</th>
                <th scope="col">Package address</th>
            </tr>
          </thead>
          <tbody>
            {% for package_path, package_name in get_tentacles_packages().items() %}
            <tr>
                <td>{{package_name}}</td>
                <td>{{package_path}}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        <br>
        <h2>Additional tentacles packages registration</h2>
        <div class="config-root" update-url="{{ url_for('tentacle_packages', update_type='add_package') }}">
          <div class='progress' id='register_and_install_package_progess_bar' style='display: none;'>
              <div class='progress-bar progress-bar-striped bg-danger progress-bar-animated' role='progressbar' aria-valuenow='100' aria-valuemin='0' aria-valuemax='100' style='width: 100%;'></div>
          </div>
          <div class="input-group mb-3">
              <input type="text" class="form-control" placeholder="Package localisation or url" aria-label="Package localisation or url" id="register_and_install_package_input">
              <div class="input-group-append">
                <button class="btn btn-md btn-outline-success config-root m-0 px-3 py-2 z-depth-0 waves-effect" type="submit" onclick="register_and_install_package()" id="register_and_install_package_button">Register and install</button>
              </div>
          </div>
        </div>
    </div>
</div>
<br>
<div class="card">
    <div class="card-header"><h2>Packages management</h2></div>
    <div class="card-body">
        <div class='progress' id='packages_action_progess_bar' style='display: none;'>
            <div class='progress-bar progress-bar-striped bg-danger progress-bar-animated' role='progressbar' aria-valuenow='100' aria-valuemin='0' aria-valuemax='100' style='width: 100%;'></div>
        </div>
        <div class="btn-group btn-group mx-auto" role="group">
            <button type="button" class="btn btn-success card-link waves-effect" id="install_tentacles_packages" update-url="{{ url_for('tentacle_packages', update_type='install_packages') }}">Re-install registered tentacles packages</button>
            <button type="button" class="btn btn-primary card-link waves-effect" id="update_tentacles_packages" update-url="{{ url_for('tentacle_packages', update_type='update_packages') }}">Update installed packages</button>
            <button type="button" class="btn btn-danger card-link waves-effect" id="reset_tentacles_packages" update-url="{{ url_for('tentacle_packages', update_type='reset_packages') }}">Remove installed packages</button>
        </div>
  </div>
</div>
<br>
{% endblock %}

{% block additional_scripts %}
<script src="{{ url_for('static', filename='js/components/tentacles_configuration.js') }}"></script>
{% endblock additional_scripts %}
