{% extends "_base.html" %}

{% load static %}
{% load fullurl %}
{% load guard %}
{% load i18n %}
{% load site_defaults %}

{% block custom_header %}
  <div class="container-fluid init-index-header">
    <div class="container">
      <div class="row title">
        <div class="col-12 text-center" style="padding-top: 4rem; padding-bottom: 3rem">
          <h1 class="display-3">{% trans "Plenum" %}</h1>
        </div>
      </div>
    </div>
  </div>
  
  {% include "initproc/blocks/filter.html" %}

{% endblock %}

{% block content %}
  <div class="container-fluid">
  	<div class="container filter-list">
  		{% if user.is_authenticated %}
    		<div class="row filter-participation">
    			<div class="col">
    				<div id="filter-supported" class="text-muted">
    		      		<i class="material-icons check-box">check_box</i><i class="material-icons check-box-outline-blank">check_box_outline_blank</i>{% trans "Hide Initiatives I have " %}<span class="fg-support">{% trans "expressed my support" %}.</span>
    				</div>
    			</div>
    		</div>
    		<div class="row filter-participation">
    			<div class="col">
    				<div id="filter-voted" class="text-muted">
    		      		<i class="material-icons check-box">check_box</i><i class="material-icons check-box-outline-blank">check_box_outline_blank</i>{% trans "Hide Initiatives I have " %} <span class="fg-vote">{% trans "voted on" %}.</span>
    				</div>
    			</div>
    		</div>
  		{% endif %}
  	</div>
  </div>
  <div id="init-list" class="container init-index">
  	{% include "fragments/initiative/list.html" %}
  </div>
{% endblock %}

{% block body-javascript %}

{{ block.super }}
  <script type="text/javascript">
  $(function(){
		var submitTimeout = null;
    $('.typefilter input').change(function(item) {
      $("#init-list").html("Loading ...");
	    $("#filters").submit();
    });
	});

	// Initialize Tooltips
	$(function () {
    $('[data-toggle="tooltip"]').tooltip();
  });

	$(function () {
		var filterSupported = Cookies.get('filterSupported');
		function filterSupportedHide () {
			$('#filter-supported .check-box-outline-blank').hide();
			$('#filter-supported .check-box').show();
    		$('#init-list').addClass('hide-supported');
    		Cookies.set('filterSupported', 'hide');
		}
		function filterSupportedShow () {
			$('#filter-supported .check-box-outline-blank').show();
			$('#filter-supported .check-box').hide();
    		$('#init-list').removeClass('hide-supported');
    		Cookies.set('filterSupported', 'show');
		}
		function setSupportedState () {
			if (filterSupported == 'hide') {
				filterSupportedHide();
	    		}
	    		else {
	    			filterSupportedShow();
	    		}
		}
		setSupportedState();
		$('#filter-supported').on('click', function () {
			var filterSupported = Cookies.get('filterSupported');
			if (filterSupported == 'hide') {
				filterSupportedShow();
			}
			else {
				filterSupportedHide();
			}
		});
	});

	$(function () {
		var filterVoted = Cookies.get('filterVoted');
		function filterVotedHide () {
			$('#filter-voted .check-box-outline-blank').hide();
			$('#filter-voted .check-box').show();
    		$('#init-list').addClass('hide-voted');
    		Cookies.set('filterVoted', 'hide');
		}
		function filterVotedShow () {
			$('#filter-voted .check-box-outline-blank').show();
			$('#filter-voted .check-box').hide();
    		$('#init-list').removeClass('hide-voted');
    		Cookies.set('filterVoted', 'show');
		}
		function setVotedState () {
            if (filterVoted == 'hide') {
                filterVotedHide();
            }
            else {
                filterVotedShow();
		    }
		}
		setVotedState();
		$('#filter-voted').on('click', function () {
			var filterVoted = Cookies.get('filterVoted');
			if (filterVoted == 'hide') {
				filterVotedShow();
			}
			else {
				filterVotedHide();
			}
		});
  });
  </script>

{% endblock %}