{% extends "layout.html" %}
{% set active_page = "tentacles" %}
{% block body %}
<br>
<div class="card">
    <div class="card-header">
        <h1>Installed Tentacles
        <span class="float-right">
            <a class="text-danger" target="_blank" rel="noopener noreferrer" href="https://github.com/Drakkar-Software/OctoBot/wiki/Tentacle-Manager#tentacle-manager">
                <i class="fa fa-question"></i>
            </a>
        </span>
        </h1>
    </div>
    <div class="card-body">
        <span id="table-span">
            <table class="table table-striped table-bordered table-sm table-hover" id="tentacles_modules_table">
              <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Package</th>
                    <th scope="col">Name</th>
                    <th scope="col">Type</th>
                    <th scope="col">Function</th>
                    <th scope="col">Version</th>
                    <th scope="col" class="text-center">Action</th>
                </tr>
              </thead>
              <tbody id="module-table" update-update-url="{{ url_for('tentacle_packages', update_type='update_modules') }}" uninstall-update-url="{{ url_for('tentacle_packages', update_type='uninstall_modules') }}">
                {% for tentacle in get_tentacles().values() %}
                    <tr>
                        <td class="selectable_tentacle"><div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input tentacle-module-checkbox" module="{{tentacle.name}}">
                            <label class="custom-control-label"></label>
                        </div></td>
                        <td class="selectable_tentacle">{{tentacle.package_name}}</td>
                        <td class="selectable_tentacle">{{tentacle.name}}</td>
                        <td class="selectable_tentacle">{{tentacle.type}}</td>
                        <td class="selectable_tentacle">{{tentacle.subtype}}</td>
                        <td class="selectable_tentacle">{{tentacle.version}}</td>
                        <td class="text-center"><a class="btn fa fa-download waves-effect" onclick="update('{{tentacle.name}}')" data-toggle="tooltip" data-placement="right" title="Update tentacle"></a>
                            <a class="btn fa fa-trash-alt waves-effect" onclick="uninstall('{{tentacle.name}}')" data-toggle="tooltip" data-placement="right" title="Uninstall tentacle"></a></td>
                    </tr>
                {% endfor %}
              </tbody>
            </table>
        </span>
        <div class='progress' id='selected_tentacles_operation' 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 text-center" role="group">
            <button type="button" class="btn btn-primary card-link waves-effect" id="update_selected_tentacles" update-url="{{ url_for('tentacle_packages', update_type='update_modules') }}">Update selected tentacles</button>
            <button type="button" class="btn btn-danger card-link waves-effect" id="uninstall_selected_tentacles" update-url="{{ url_for('tentacle_packages', update_type='uninstall_modules') }}">Uninstall selected tentacles</button>
        </div>
    </div>
</div>

<div class="card-footer text-center">
    <a href="{{ url_for('tentacle_packages') }}" class="btn btn-outline-info btn-lg waves-effect"><i class="fa fa-cloud-download-alt"></i> Install Tentacles packages</a>
</div>

{% endblock %}

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