{% extends 'risk/project_detail.html' %}
{% block title %}Tasks{% endblock title %}
{% block projekt-div %}
<div class="bg-light col-10 d-flex">
    <div class="card mt-3">
        <div class="card-header">
            <div class="row">
                <h5 class="card-title col-3">Tasks</h5>

                <div class="col-9 ">
                    <div class="modal fade" tabindex="-1" role="dialog" id="modal">
                        <div class="modal-dialog modal-lg" role="document">
                          <div class="modal-content"></div>
                        </div>
                    </div>
                    <div class="form-inline float-right">
                        <div class="dropdown mr-2">
                            <div class="form-inline">
                                <button class="btn btn-outline-info dropdown-toggle" type="button" id="dropdownPhases" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                State
                                </button>
                                <div class="dropdown-menu" aria-labelledby="dropdownPhases">
                                {% for state,text in taskstates %}
                                    <a class="dropdown-item" type="button" href="?state={{state}}">{{text}}</a>
                                {% endfor %}
                                </div>
                            </div>
                        </div>
                        {% if perms.risk.add_risk and object.is_active %}
                            <button id="create-task" class="btn btn-success" type="button" name="button">Add Task</button>
                        {% endif %}

                    </div>

                </div>
            </div>
        </div>
        <div class="card-body">
            <table class="table table-responsive">
                    <tr>
                <thead class="thead-light">
                    <tr>
                    <th scope="col">Task ID</th>
                    <th scope="col">Name</th>
                    <th scope="col">Developer</th>
                    <th scope="col">Check from</th>
                    <th scope="col">State</th>
                    <th scope="col">Added</th>
                    <th scope="col">Deadline</th>
                    <th scope="col">Project phase</th>
                    <th scope="col"> </th>
                    </tr>
                </thead>
                <tbody>
                    {% for task in tasks %}
                        <tr data-href="{% url 'project-task-change' project_id task.pk%}">
                        <td >{{task.taskID}}</td>
                        <td >{{task.name}}</td>
                        <td >{{task.task_dev}}</td>
                        <td >{{task.task_check }}</td>
                        <td >{{task.taskstate}}</td>
                        <td >{{task.add_date}}</td>
                        <td >{{task.final_date}}</td>
                        <td >{{task.project_phase}}</td>
                        <td>
                            <div class="d-flex">
                                {% if perms.risk.view_project %}
                                    <button type="button" class="detail-task btn btn-sm btn-primary mr-2" data-form-url="{% url 'project-task-detail' project_id task.pk %}">
                                        <span class="fa fa-pencil">Detail</span>
                                    </button>
                                {% endif %}        
                                {% if perms.risk.change_risk %}
                                    <button type="button" class="update-task btn btn-sm btn-warning mr-2"  data-form-url="{% url 'project-task-change' project_id task.pk%}">
                                        <span class="fa fa-pencil">Edit</span>
                                    </button>
                                {% endif %}

                                {% if perms.risk.delete_risk %}
                                    <button type="button" class="delete-task btn btn-sm btn-danger" data-form-url="{% url 'task-delete' project_id task.pk %}">
                                        <span class="fa fa-pencil">Delete</span>
                                    </button>
                                {% endif %}
                            </div>    
                        </td>
                        </tr>
                    {% endfor %}

                </tbody>
            </table>
        </div>
    </div>
</div>


{% endblock projekt-div %}

{% block js %}
{{block.super}}
<script type="text/javascript">
    $(document).ready(function() {
        $("#create-task").modalForm({
            formURL: "{% url 'project-task-create' project_id %}"
        });

        $(".detail-task").each(function () {
            $(this).modalForm({
            formURL: $(this).data("form-url"),
            });
        });

        $(".update-task").each(function () {
            $(this).modalForm({
            formURL: $(this).data("form-url"),
            });
        });

        $(".delete-task").each(function () {
            $(this).modalForm({
              formURL: $(this).data("form-url"),
            });
          });

        $("#propF").click(function(){
          $("#dopFD").hide();
          $("#stateFD").hide();
          $("#propFD").toggle();

              });
        $("#dopF").click(function(){
          $("#stateFD").hide();
          $("#propFD").hide();
          $("#dopFD").toggle();
              });
        $("#stateF").click(function(){
          $("#propFD").hide();
          $("#dopFD").hide();
          $("#stateFD").toggle();
              });
      });

</script>
{% endblock js %}