{% extends "../page_layout.html" %}
{% block title %}Plugins | Unmanic{% end %}
{% block page %}plugins{% end %}

{% block head %}
<link rel="stylesheet" type="text/css" href="/assets/css/plugins.css?version={{ escape(handler.config.read_version()) }}"/>
<link rel="stylesheet" type="text/css" href="/assets/css/plugin-repo.css?version={{ escape(handler.config.read_version()) }}"/>
{% end %}

{% block page_plugin_styles %}
{# START DATATABLES #}
<link rel="stylesheet" type="text/css"
      href="/assets/plugins/datatables/datatables.min.css?version={{ escape(handler.config.read_version()) }}"/>
<link rel="stylesheet" type="text/css"
      href="/assets/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css?version={{ escape(handler.config.read_version()) }}"/>
{# END DATATABLES #}
{% end %}
{% block page_plugins %}
{# START DATATABLES #}
<script type="text/javascript"
        src="/assets/js/datatable.js?version={{ escape(handler.config.read_version()) }}"></script>
<script type="text/javascript"
        src="/assets/plugins/datatables/datatables.min.js?version={{ escape(handler.config.read_version()) }}"></script>
<script type="text/javascript"
        src="/assets/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js?version={{ escape(handler.config.read_version()) }}"></script>
{# END DATATABLES #}
{% end %}

{% block vendor_style %}
{# START JQUERY.FLOWCHART #}
<link rel="stylesheet" type="text/css"
      href="/assets/vendor/jquery-ui-dist/jquery-ui.css?version={{ escape(handler.config.read_version()) }}"/>
<link rel="stylesheet" type="text/css"
      href="/assets/vendor/jquery.flowchart/jquery.flowchart.css?version={{ escape(handler.config.read_version()) }}"/>
{# END JQUERY.FLOWCHART #}
{% end %}
{% block vendor_scripts %}
{# START JQUERY.FLOWCHART #}
<script type="text/javascript"
        src="/assets/vendor/jquery-ui-dist/jquery-ui.js?version={{ escape(handler.config.read_version()) }}"></script>
<script type="text/javascript"
        src="/assets/vendor/jquery.flowchart/jquery.flowchart.js?version={{ escape(handler.config.read_version()) }}"></script>
{# END JQUERY.FLOWCHART #}
{% end %}

{% block page_theme_scripts %}
{# START PAGE COMPONENTS #}
<script type="text/javascript"
        src="/assets/js/page_components/plugins/plugins.js?version={{ escape(handler.config.read_version()) }}"></script>
<script type="text/javascript"
        src="/assets/js/page_components/plugins/plugin-flow.js?version={{ escape(handler.config.read_version()) }}"></script>
{# END PAGE COMPONENTS #}
{% end %}

{% block content %}

<div class="row">
    <div class="col-md-12">
        <!-- BEGIN TABLE PORTLET-->
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption font-dark">
                    <i class="icon-puzzle font-dark"></i>
                    <span class="caption-subject bold uppercase">Installed Plugins</span>
                </div>
            </div>
            <div class="portlet-body">
                <div class="table-toolbar">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="btn-group">
                                <button id="add_plugins" class="btn sbold btn-primary"
                                        {% if session.level == 0 %}
                                            data-target="#login-popup"
                                        {% elif session.level == 1 %}
                                            data-target="#insufficient-permissions-popup"
                                        {% elif session.level > 1 %}
                                            data-target="#add-new-plugins"
                                        {% end %}
                                        data-toggle="modal">
                                    Add New
                                    <i class="fa fa-plus"></i>
                                </button>
                            </div>
                            <div class="btn-group">
                                <button id="set_plugin_flow" class="btn sbold btn-primary"
                                        {% if session.level == 0 %}
                                            data-target="#login-popup"
                                        {% elif session.level == 1 %}
                                            data-target="#insufficient-permissions-popup"
                                        {% elif session.level > 1 %}
                                            data-target="#configure-plugin-flow"
                                        {% end %}
                                        data-toggle="modal">
                                    Configure Plugin Flow
                                    <i class="fa fa-sort-amount-asc"></i>
                                </button>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="btn-group pull-right">
                                <a class="btn btn-default btn-sm" href="javascript:;" data-toggle="dropdown">
                                    <i class="fa fa-check-square-o"></i> Options
                                    <i class="fa fa-angle-down"></i>
                                </a>
                                <ul class="dropdown-menu pull-right">
                                    <li>
                                        <a href="javascript:;" id="enable-selected-plugins">
                                            <i class="fa fa-check-circle-o"></i> Enable Plugin(s) </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" id="disable-selected-plugins">
                                            <i class="fa fa-circle-o"></i> Disable Plugin(s) </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" id="update-selected-plugins">
                                            <i class="fa fa-cloud-download"></i> Update Plugin(s) </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" id="remove-selected-plugins">
                                            <i class="fa fa-trash-o"></i> Remove Plugin(s) </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <table class="table table-striped table-bordered table-hover table-checkable order-column"
                       id="installed_plugins_table">
                    <thead>
                    <tr>
                        <th>
                            <input type="checkbox" class="group-checkable" data-set="#installed_plugins_table .checkboxes"/>
                        </th>
                        <th> </th>
                        <th> Plugin</th>
                        <th> Description</th>
                        <th> Tags</th>
                        <th> Author</th>
                        <th> Version</th>
                        <th> Status</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- Content dynamically generated via the datatable library -->
                    </tbody>
                </table>
            </div>
        </div>
        <!-- END TABLE PORTLET-->
    </div>
</div>


<!-- ADD NEW PLUGINS MODEL -->
{% if session.level == 0 %}

    {% include "../global/login-popup.html" %}

{% elif session.level == 1 %}

    {% set minimum_required_sponsorship_level = "Supporter" %}
    {% include "../global/insufficient-permissions.html" %}

{% elif session.level > 1 %}

    {# Add new plugins pop-up #}
    <div id="add-new-plugins" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-full">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close add-new-plugins-close" data-dismiss="modal" aria-hidden="true"></button>
                    <h2 class="modal-title"><i class="icon-puzzle font-dark"></i> Plugins</h2>
                    <a href="javascript:;" class="btn btn-primary btn-sm pull-right" id="plugins-check-updates"
                       data-toggle="tooltip" title="Check repos for latest plugins">
                        <i class="fa fa-repeat"></i> Check for updates
                    </a>
                </div>
                <div class="modal-body">
                    {% include "install-plugins.html" %}
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-default dark add-new-plugins-close">Close</button>
                </div>
            </div>
        </div>
    </div>

    {# Configure plugin flow pop-up #}
    <div id="configure-plugin-flow" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-full">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close configure-plugin-flow-close" data-dismiss="modal"
                            aria-hidden="true"></button>
                    <h2 class="modal-title"><i class="icon-puzzle font-dark"></i> Plugin Flow </h2>
                </div>
                <div class="modal-body">

                    {% for option in data.get('plugin_types') %}
                        <div class="row">
                            <div class="col-lg-12">

                                <div class="portlet light bordered">
                                    <div class="portlet-title">
                                        <div class="caption">
                                            <span class="caption-subject font-red bold uppercase">
                                                {{ escape(option.get('name')) }}
                                            </span>
                                        </div>
                                        <div class="tools">
                                            <a href="javascript:;" class="collapse"> </a>
                                        </div>
                                    </div>

                                    <div class="portlet-body" id="configure-plugin-flow-body">
                                        <div class="plugin-flowchart-details">
                                            <input type="hidden" name="plugin_type_id" id="plugin_type_id"
                                                   value="{{ escape(option.get('id')) }}">

                                            <input type="hidden" name="plugin_type" id="plugin_type"
                                                   value="{{ escape(option.get('plugin_type')) }}">

                                        </div>
                                        <div id="{{ escape(option.get('id')) }}_plugin_flowchart_container"
                                             class="plugin-flowchart-container"></div>

                                        <br>
                                        <button type="button" class="btn green plugin_flow_save"
                                                id="{{ escape(option.get('id')) }}_plugin_flow_save">
                                            Save Flow
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% end %}

                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-default dark configure-plugin-flow-close">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>

{% end %}

<!-- END ADD NEW PLUGINS MODEL -->


<!-- PLUGIN INFO AND CONFIGURE -->
<div id="configure-plugin" class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h2 class="modal-title"><i class="icon-puzzle font-dark"></i> Plugin Info</h2>
            </div>
            <div class="modal-body" id="configure-plugin-body">
                <!-- Dynamically generated content -->
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-default dark">Close</button>
            </div>
        </div>
    </div>

</div>
<!-- END PLUGIN INFO AND CONFIGURE -->

{% end %}
