{% extends 'risk/project_detail.html' %}
{% block title %}Issues{% 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">Issues </h5>
                <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="col-9 ">
                    <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 issuestates %}
                                    <a class="dropdown-item" type="button" href="?state={{state}}">{{text}}</a>
                                {% endfor %}
                                </div>
                            </div>
                        </div>      
                        <button id="create-issue" class="btn btn-success" type="button" name="button">Add Issue</button>
                    </div>

                </div>
            </div>
        </div>
        <div class="card-body">
            <table class="table table-responsive">
                <thead class="thead-light">
                    <th scope="col">Issue ID</th>
                    <th scope="col">Name</th>
                    <th scope="col">Fix from</th>
                    <th scope="col">Check from</th>
                    <th scope="col">State</th>
                    <th scope="col" colspan= "2" ></th>
                </thead>

                <tbody>

                    {% for issue in issues %}
                        <tr data-href="{% url 'project-issues' project_id %}">
                        <td >{{issue.issueID}}</td>
                        <td >{{issue.name}}</td>
                        <td >{{issue.issue_dev}}</td>
                        <td >{{issue.issue_check}}</td>
                        <td >{{issue.issuestate}}</td>
                        <td>
                            <div class="d-flex">
                                {% if perms.risk.change_risk %}
                                    <button type="button" class="detail-issue btn btn-sm btn-primary mr-2" data-form-url="{% url 'project-issue-detail' project_id issue.pk %}">
                                        <span class="fa fa-pencil">Detail</span>
                                    </button>
                                {% endif %}
                                {% if perms.risk.change_risk %}
                                    <button type="button" class="update-issue btn btn-sm btn-warning mr-2" data-form-url="{% url 'project-issue-update' project_id issue.pk %}">
                                        <span class="fa fa-pencil">Edit</span>
                                    </button>
                                {% endif %}
                                {% if perms.risk.delete_risk %}
                                    <button type="button" class="delete-issue btn btn-sm btn-danger" data-form-url="{% url 'project-issue-delete' project_id  issue.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-issue").modalForm({
            formURL: "{% url 'project-issue-create' project_id %}"
        });
        
        $(".detail-issue").each(function () {
            $(this).modalForm({
              formURL: $(this).data("form-url"),
            });
          });

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

        $(".delete-issue").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 %}





{% comment %}
{% extends 'risk/project_detail.html' %}
{% block title %} Issues {% endblock title %}
{% block project-div %}
<div class="bg-light col-10 d-flex justify-content-center">
    <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" 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 states %}
                                    <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-issue" class="btn btn-success" type="button" name="button">Add Issue</button>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body">
            <table class="table">
                <thead class="thead-light">
                    <tr>
                        <th scope="col">Issue ID</th>
                        <th scope="col">Name</th>
                        <th scope="col">Fix from</th>
                        <th scope="col">Check from</th>
                        <th scope="col">State</th>
                        <th scope="col">Description</th>
                        <th scope="col"> </th>
                    </tr>
                </thead>
                <tbody>
                    {% for issue in issues %}
                        <td class="clickable-row">{{issue.issueID}}</td>
                        <td class="clickable-row">{{issue.name}}</td>
                        <td class="clickable-row">{{issue.issue_dev}}</td>
                        <td class="clickable-row">{{issue.issue_check}}</td>
                        <td class="clickable-row">{{issue.issuestate}}</td>
                        <td class="clickable-row">{{issue.description}}</td>
                        <td>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

{% endblock project-div %}

{% block js %}
{{block.super}}
<script type="text/javascript">
    $(document).ready(function() {

        $("#create-issue").modalForm({
            formURL: "{% url 'project-issue-create' project_id %}"
        });

        $("#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 %}

{% endcomment %}