{% extends "settings_page.html" %}

{% block header_script_files %}
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
{% endblock %}

{% block settings_pane %}

<div id="app">
    <plugins ref="plugins" v-bind:plugins="plugins"></plugins>
</div>

{% endblock %}

{% block script %}

Vue.component('plugin',{
    props:['plugin'],
    template: `
    <tr>
        <th scope="row">[[ plugin.plugin_name ]]</th>
        <td>[[ plugin.plugin_description ]]</td>
        <td>[[ plugin.plugin_version ]]</td>
        <td>[[ plugin.plugin_author ]]</td>
        <td>[[ plugin.plugin_url ]]</td>
        <td>[[ plugin.plugin_license ]]</td>
        <td>[[ plugin.plugin_state ]]</td>
        <td><button type="button" class="btn" v-bind:class="pluginClass">[[ pluginAction ]]</button>    </td>
    </tr>
    `,
    computed: {
        pluginClass() {
            let classname = 'btn-danger';
            if(this.plugin.plugin_state == 'disabled') {
                classname = 'btn-success';
            };
            return classname;
        },
        pluginAction() {
            let text = 'Disable';
            if(this.plugin.plugin_state == 'disabled') {
                text = 'Enable';
            };
            return text;
        }
    },
    delimiters: ["[[","]]"]
})

Vue.component('plugins',{
    props: ['plugins'],
    template: `
    <div class="row r-10 m-2">
        <div class="col col-12">
            <div class="row">
                <div class="col-sm-12 col-md-6 text-center text-md-start">
                    <h2>Plugins</h2>
                </div>
                <div class="col-sm-12 col-md-6 text-center text-md-end">
                    <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#settingsModal">Install Plugin</button>
                </div>
            </div>
            <hr />
            <div class="row">
                <table class="table">
                    <thead>
                        <tr>
                            <th scop="col">Name</th>
                            <th scop="col">Description</th>
                            <th scop="col">Version</th>
                            <th scop="col">Author</th>
                            <th scop="col">URL</th>
                            <th scop="col">License</th>
                            <th scop="col">State</th>
                            <th scop="col">Action</th>
                        </tr>
                    </thead>
                    <tbody class="tablebody">
                        <plugin
                            v-for="plugin in plugins"
                            v-bind:plugin="plugin"
                            v-bind:key="plugin.plugin_name"
                        ></plugin>
                    </tbody>
                </table>
            </div>
        </div>
    </div>    
    `,
    delimiters: ["[[","]]"]
})

var app = new Vue({
    el: '#app',
    data: {
        plugins: [],
    },
    created() {
        this.getPlugins()
    },
    methods: {
        getPlugins() {
            axios.get('{{ url_for('api.api_get_plugins') }}')
            .then(res => {
                this.plugins = res.data.results
            })
        }
    },
    delimiters: ["[[","]]"]
})

{% endblock %}