{% extends 'risk/project_detail.html' %}
{% block extra_css %}
<style>
    .success {
        background-color: rgba(40, 167, 69, 0.4);
    }
    .warning {
        background-color: rgba(255, 193, 7, 0.4);
    }
    .danger {
        background-color: rgba(220, 53, 69, 0.4);
    }
</style>
{% endblock extra_css %}

{% block projekt-div %}
<div class="bg-light col-10">
    <div class="card mt-3">
        <div class="card-header">
            <div class="row">
            <h5 class="card-title col-3">Risk register</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-risk" class="btn btn-success" type="button" name="button">Create Risk</button>
                        {% endif %}
                    </div>

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


        <div class="card-body">
            <div class="bg-light col-10 d-flex justify-content-center">

                <table class="table table-bordered mt-3" id="matrix">
                <thead class="">
                <th></th>
                {% for impact in impacts %}
                    <th>{{ impact }}</th>
                {% endfor %}
                </thead>
                <tbody>
                {% for label, cols in matrix.items %}
                    <tr>
                        <th>{{ label }}</th>
                        {% for col in cols %}
                            <td class="text-center">
                                {% comment %} {% for risk in col %}
                                    <a href="{% url 'risk-detail' project_id risk.project_phase.pk risk.pk %}" class="text-dark"> {{ risk.name }} </a>
                                {% endfor %} {% endcomment %}
                                {{ col }}
                            </td>
                        {% endfor %}
                {% endfor %}
                </table>

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

    
    <div class="card mt-3">
        <div class="card-body">
            <table class="table table-responsive">
                    <tr>
                <thead class="thead-light">
                    <tr>
                    <th scope="col">Risk name</th>
                    {% comment %} <th scope="col">Category</th> {% endcomment %}
                    <th scope="col">Threat</th>
                    <th scope="col">Starter</th>
                    <th scope="col">Owner</th>
                    <th scope="col">Risk</th>
                    <th scope="col">State</th>
                    <th scope="col">Change date</th>
                    <th scope="col">Phase</th>
                    {% comment %} <th scope="col">Type</th> {% endcomment %}
                    <th scope="col"> </th>
                    </tr>
                </thead>

                <tbody>
                    {% for risk in risks %}
                        <!--<tr data-href="{% url 'risk-detail' project_id object.pk risk.pk %}">-->
                        <td >{{risk.name}}</td>
                        {% comment %} <td >{{risk.risk_type}}</td> {% endcomment %}
                        <td >{{risk.threat}}</td>
                        <td >{{risk.starter}}</td>
                        <td >{{risk.risk_assignee}}</td>
                        <td >{{risk.risk}}</td>
                        <td >{{risk.state}}</td>
                        <td >{{risk.state_change_date|default_if_none:"-"}}</td>
                        <td >{{risk.project_phase}}</td>
                        {% comment %} <td >{{risk.risk_type}}</td> {% endcomment %}
                        <td>
                            <div class="d-flex">   
                            {% if perms.risk.view_project%}
                            <button type="button" class="detail-risk btn btn-sm btn-primary mr-2" data-form-url="{% url 'risk-detail' project_id object.pk risk.pk %}">
                                <span class="fa fa-pencil">Detail</span>
                            </button>
                            {% endif %}
                            {% if perms.risk.change_risk %}
                                <button type="button" class="update-risk btn btn-sm btn-warning mr-2" data-form-url="{% url 'risk-update' project_id object.pk risk.pk %}">
                                    <span class="fa fa-pencil">Edit</span>
                                </button>
                            {% endif %}
                            {% if perms.risk.delete_risk %}
                                <button type="button" class="delete-risk btn btn-sm btn-danger" data-form-url="{% url 'risk-delete' project_id object.pk risk.pk %}">
                                    <span class="fa fa-pencil">Delete</span>
                                </button>
                            {% endif %}
                            </div>    
                        </td>
                        </tr>
                    {% endfor %}

                </tbody>
            </table>

        </div>
    </div>
    <footer>
        <div>
            <p>Informace o metodě RIPRAN™
                Metoda RIPRAN™ (RIsk PRoject ANalysis) je určena zejména pro analýzu projektových rizik. Autorem metody je Branislav Lacko. Metoda vznikla původně pro analýzu rizik automatizačních projektů. Praxe ukázala, že metodu je možno aplikovat pro analýzu rizik širokého spektra různých projektů a v určitých případech i pro analýzu jiných druhů rizik, než jsou projektová rizika. RIPRAN™ je ochranná známka, registrovaná Úřadem průmyslového vlastnictví Praha pod registračním čislem 283536.</p>
        </div>
    </footer>    
</div>
{% endblock projekt-div %}


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

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

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

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

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

});
</script>

<script>
    let table = document.getElementById('matrix');

    table.rows[5].cells[1].classList.add('warning');
    table.rows[5].cells[2].classList.add('success');
    table.rows[5].cells[3].classList.add('success');
    table.rows[5].cells[4].classList.add('success');
    table.rows[5].cells[5].classList.add('success');

    table.rows[4].cells[1].classList.add('warning');
    table.rows[4].cells[2].classList.add('warning');
    table.rows[4].cells[3].classList.add('success');
    table.rows[4].cells[4].classList.add('success');
    table.rows[4].cells[5].classList.add('success');

    table.rows[3].cells[1].classList.add('warning');
    table.rows[3].cells[2].classList.add('warning');
    table.rows[3].cells[3].classList.add('warning');
    table.rows[3].cells[4].classList.add('success');
    table.rows[3].cells[5].classList.add('success');

    table.rows[2].cells[1].classList.add('danger');
    table.rows[2].cells[2].classList.add('danger');
    table.rows[2].cells[3].classList.add('warning');
    table.rows[2].cells[4].classList.add('warning');
    table.rows[2].cells[5].classList.add('success');

    table.rows[1].cells[1].classList.add('danger');
    table.rows[1].cells[2].classList.add('danger');
    table.rows[1].cells[3].classList.add('warning');
    table.rows[1].cells[4].classList.add('warning');
    table.rows[1].cells[5].classList.add('warning');
</script>
{% endblock js %}