{% extends "base.html" %}
{% load get %}
{% load date_tag %}
{% load staticfiles %}

{% block head_block %}
  	{{ block.super }}

{% endblock %}
{% block title_header_big %}
    {{ block.super }}
{% endblock %}
{% block left_sidebar %}

{% include 'left_sidebar_base.html' %}

{% endblock %}


{% block breadcrumb_body %}
  	{{ block.super }}
    <li><a href="{% url 'projects:projects_list' %}">Projects</a></li>
{% endblock %}

{% block content_body %}
  	{{ block.super }}
 {% csrf_token %}
<div class="row">
<div class="col-md-12">

    <div class="box">
        <div class="box-header with-border">
                  <h3 class="box-title">Projects</h3>
            <div class="box-tools">
                <button type="button" class="btn btn-default" data-container="body"
                                        data-toggle="tooltip" data-placement="top" title="New Project"
                                        onclick="javascript:showModalNewProject()">
                                    <i class="fa fa-plus"></i> New Project</button>
            </div>
        </div>
        <div class="box-body">
			<table id="projects_table" class="table table-bordered table-striped">
				<thead>
					<tr>

						<th>Name</th>

						<th>Modification Date</th>
						<th>Creation Date</th>


						<th><i class="far fa-trash-alt"></i></th>
					</tr>
				</thead>
				<tbody>
				{% for p in projects %}
					<tr>

						<td>
							<a href="/projects/switch/{{ p.name }}" >{{ p.name }}</a>
						</td>

						<td>{{ p|get_sub:"_admin,modified"|get_date}}</td>
                        <td>{{ p|get_sub:"_admin,created"|get_date}}</td>

						<td><a href="javascript:deleteProject('{% url 'projects:delete_project' %}')"> Delete</a></td>

					</tr>
				{% endfor %}
				</tbody>
			</table>
		</div>
    </div>
</div>

</div>
{% include "modal/new_project.html" %}
{% endblock %}

{% block resource_block %}
  	{{ block.super }}
    <script>
    function showModalNewProject(){
        $('#modal_new_project').modal('show');
    }

    function deleteProject(url) {
    bootbox.confirm("Are you sure want to delete?", function (result) {
        if (result) {
            $.ajax({
            url: url,
            type: 'GET',
            headers: {
                "Accept": 'application/json'
            },
            contentType: false,
            processData: false
        }).done(function (response,textStatus, jqXHR) {

            bootbox.alert({
                title: "Result",
                message: "Project deleted.",
                callback: function () {
                    location.reload();
                }
            });
        }).fail(function(result){
            var data  = result.responseJSON;
            var title = "Error " + (data.code ? data.code: 'unknown');
                var message = data.detail ? data.detail: 'No detail available.';
                bootbox.alert({
                    title: title,
                    message: message
                });
        });
        }
    })
    }

    $(document).ready(function () {
    $("#formNewProject").submit(function (event) {
        event.preventDefault(); //prevent default action
        var post_url = $(this).attr("action"); //get form action url
        var request_method = $(this).attr("method"); //get form GET/POST method
        var form_data = new FormData(this); //Encode form elements for submission
        console.log(post_url);
        $.ajax({
            url: post_url,
            type: request_method,
            data: form_data,
            headers: {
                "Accept": 'application/json'
            },
            contentType: false,
            processData: false
        }).done(function (response,textStatus, jqXHR) {
            bootbox.alert({
                    title: "Result",
                    message: "Project created.",
                callback: function () {
                    location.reload();
                }
                });
        }).fail(function(result){
            var data  = result.responseJSON;
            var title = "Error " + (data.code ? data.code: 'unknown');
                var message = data.detail ? data.detail: 'No detail available.';
                bootbox.alert({
                    title: title,
                    message: message
                });
        });
    });
    });




    </script>


{% endblock %}