{% extends "layout/default.html" %}

{% set title = _("Plugins") %}

{% block body %}

<h1>{{_("Plugins")}}</h1>

<div class="row">
  <div class="col s12">
      <ul class="tabs">
          <li class="tab col s3"><a class="active" href="#get">{{_('Plugins')}}</a></li>
          <li class="tab col s3"><a href="#install">{{_('Install')}}</a></li>
          <li class="tab col s3"><a href="#install_url">{{_('Install With URL')}}</a></li>
    </ul>
    </div>
</div>

<div id="get" >
<div class="card-panel white">



<div class="row">

{% if plugins == [] %}
<h4>{{ _('You have not install some plugin') }}</h4>
{% else %}
{% for plugin in plugins %}
<div class="col s4">
<h2 class="header">{{plugin['name']}}</h2>
	<div class="card horizontal blue-grey darken-1">
		<div class="card-stacked">
			<div class="card-content">
				<p>{{plugin['desc']}}</p><br>
				<p>{{plugin['version']}}</p>
			</div>
			<div class="card-action">
				{% if plugin['index'] is defined %}<a href="{{ url_for(plugin['index']) }}">{{ _("View") }}</a>{% endif %}
				<a href="{{ url_for('core.uninstall_plugin', name=plugin['raw']) }}">{{ _("Uninstall") }}</a>
				<a href="{{ url_for('core.update_plugin', name=plugin['raw']) }}">{{ _("Update") }}</a>
				<a href="#">{{ _("Config") }}</a>
			</div>
		</div>
	</div>
</div>
{% endfor %}
{% endif %}


</div>




</div>
</div>

<div id="install" >
<div class="card-panel white">
<div class="row">

{% for list in lists %}

	<div class="col s4">
		<div class="card">
			<div class="card-image waves-effect waves-block waves-light">
				<img class="activator" src="{{ list['img'] }}">
			</div>
			<div class="card-content">
				<span class="card-title activator grey-text text-darken-4">{{ list['name'] }}<i class="material-icons right">more_vert</i></span>
			</div>
			<div class="card-reveal">
				<span class="card-title grey-text text-darken-4">{{ list['name'] }}<i class="material-icons right">close</i></span>
				<p>{{ list['description'] }}</p>
        {% if list['raw'] in plugins|safe %}
          <center><p class="dl_text">{{ _("Uninstalled") }}</p></center>
          <div class="progress"><div class="indeterminate"></div></div>
          <button id="uninstallbutton{{list['raw']}}" class="btn teal darken-3 btn-lg">{{ _("Uninstall") }}</button>
        {% else %}
          <center><p class="dl_text">{{ _("Installed") }}</p></center>
          <div class="progress"><div class="indeterminate"></div></div>
          <button id="installbutton{{list['raw']}}" class="btn teal darken-3 btn-lg">{{ _("Install") }}</button>
        {% endif %}
			</div>
		</div>
	</div>

  <script type="text/javascript">
      $(document).ready(function() {
          $('.progress').hide();
          $('.dl_text').hide();

          $("#installbutton{{list['raw']}}").click(function() {
            $('#installbutton{{list["raw"]}}').hide();
            $('.progress').show();
            $.ajax({
               url: '{{ url_for("core.install_plugin", name=list["raw"] , url=list["url"]) }}',
               type: "GET",
               success: function(rep) {
                  $('.progress').hide();
                  $('.dl_text').show();
               }
            });

          });
          $("#uninstallbutton{{list['raw']}}").click(function() {
            $('#uninstallbutton{{list["raw"]}}').hide();
            $('.progress').show();
            $.ajax({
               url: '{{ url_for("core.uninstall_plugin", name=list["raw"] , url=list["url"]) }}',
               type: "GET",
               success: function(rep) {
                  $('.progress').hide();
                  $('.dl_text').show();
               }
            });

          });

    });
  </script>


{% endfor %}

</div>
</div>
</div>

<div id="install_url" >
<div class="card-panel white">

<form action="{{ url_for('core.install_url') }}" method="post">
 	<label for="url">{{ _('URL') }}</label>
	<input type="text" placeholder="{{ _('URL') }}" name="url" id="url">

	<label for="name">{{ _('Plugin Name') }}</label>
	<input type="text" placeholder="{{ _('Plugin Name') }}" name="name" id="name"><br>

	<button class="btn {{buttonColor}}">{{ _('Send') }}</button>
</form>

</div>
</div>


</div>




{% endblock %}
