{% extends "base.html.twig" %}

{% block localstyle %}
    .issuecontent {
        width:75%;
    }
    .issuedetail {
        width:25%;
        padding-right: 10px;
        zoom:80%;
    }

    .text-small {
        font-size:80%;
    }

    .card-header, .card-body {
        padding:10px;
        background-color: var(--colorbgbodylight-darker);
    }

    .issue-body {
        zoom: 80%;
    }

    .badge {
        color: white;
        zoom:120%;
    }


{% endblock %}

{% block body %}

    <h3 id='issuetitle{{issue.number}}' class='issuetitle'>#{{issue.number}} = {{issue.title}}</h3>
    
    <div id='issuediv{{issue.number}}' class='d-flex'>
        <div class='issuecontent' class='d-flex flex-column'>

            <div class="card mb-3">
                <div class="card-header d-flex">
                    <div class="flex-grow-1">{{issue.user.login}}</div>
                    <div class="text-small">  le {{issue.created_at|date("d/m/Y H:i")}}</div>
                </div>
                <div class='card-body issue-body'>
                    {{issue.body|raw}}
                </div>
            </div>

            {% if issue.comments %}
                {% for comment in issue.comments %}
                    <div class="card mb-3">
                        <div class="card-header d-flex">
                            <div class="flex-grow-1">{{comment.user.login}}</div>
                            <div class="text-small">  le {{comment.created_at|date("d/m/Y H:i")}}</div>                        
                        </div>

                        <div class='card-body issue-body'>
                            {{comment.body|raw}}
                        </div>
                    </div>
                {% endfor %}
            {% endif %}
        </div>

        <div class='pl-3 issuedetail'>
            <a target="_blank" class="btn btn-success w-100 mb-3" href="{{issue.html_url}}" style="zoom:120%">Modifier dans Gitea</a>

            <div class="card mb-3">
                <div class="modissu card-header d-flex" style="cursor:pointer">
                    <div class="flex-grow-1"><i class="fas fa-weight-hanging"></i></div>
                    <div>{{ issue.weight }}</div>
                </div>
            </div>
            
            <div class='card mb-3'>
                <div class="card-header">Statut</div>
                <div class="card-body">
                    {% if issue.closed_at %}
                        Clos le {{issue.closed_at|date("d/m/Y H:i")}}
                    {% else %}
                        {{issue.statuslife}}
                    {% endif %}
                </div>
            </div>

            <div class='card mb-3'>
                <div class="card-header">Jalon</div>
                <div class="card-body">
                    {% if issue.milestone %}
                        {{ issue.milestone.title|raw }}
                    {% else %}
                        Backlog
                    {% endif %}
                </div>
            </div>

            {% if issue.sprint %}
                <div class='card mb-3'>
                    <div class="card-header">Sprint</div>
                    <div class="card-body">
                        {{ issue.sprint }}
                    </div>
                </div>
            {% endif %}

            {% if issue.refs %}
                <div class='card mb-3'>
                    <div class="card-header">Références</div>
                    <div class='card-body mb-3'>
                        {% for histo in issue.refs %}
                            <div>
                            {{histo.label|raw}}
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}

            {% if issue.labels %}
                <div class='card mb-3'>
                    <div class="card-header">Labels</div>
                    <div class='card-body mb-3'>
                        {% for label in issue.labels %}
                            <span class='badge mr-1 mb-1 p-2' style='background-color:#{{label.color}}'>{{label.name}}</span>
                        {% endfor %}

                        {% for histo in issue.labelhistos %}
                            <div class="mt-1">
                            <b>{{histo.user.login}} le {{histo.created_at|date("d/m/Y H:i")}}</b><br>
                            {{histo.label|raw}}
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}

            {% if issue.timelines %}
                <div class='card mb-3'>
                    <div class="card-header">Historique</div>
                    <div class="card-body">
                        {% for timeline in issue.timelines %}
                            {% if timeline.type!="label" and timeline.type!="comment" and timeline.type!="project" and timeline.type!="added_deadline" and timeline.type!="modified_deadline"%}
                                <li><b>{{timeline.user.login}} le {{timeline.created_at|date("d/m/Y H:i")}}</b><br>

                                {% if timeline.type == "change_title" %}
                                    <div class='pl-4'>Modification titre de <i>{{timeline.old_title}}</i> à <i>{{timeline.new_title}}</i></div>

                                {% elseif timeline.type == "milestone" %}
                                    {% if timeline.milestone %}
                                        <div class='pl-4'>Affectation au Jalon <i>{{timeline.milestone.title}}</i></div>
                                    {% else %}
                                        <div class='pl-4'>Suppression du Jalon</div>
                                    {% endif %}

                                {% elseif timeline.type == "comment_ref" or timeline.type == "pull_ref" or timeline.type == "issue_ref" %}
                                    <div class='pl-4'>Référencé le ticket <i>#{{timeline.ref_issue.number}} - {{timeline.ref_issue.title}}</i></div>

                                {% elseif timeline.type == "add_dependency" %}
                                    <div class='pl-4'>Ajouté dépendance au ticket <i>#{{timeline.dependent_issue.number}} - {{timeline.dependent_issue.title}}</i></div>

                                {% elseif timeline.type == "remove_dependency" %}
                                    <div class='pl-4'>Supprimé dépendance au ticket <i>#{{timeline.dependent_issue.number}} - {{timeline.dependent_issue.title}}</i></div>

                                {% elseif timeline.type == "pull_push" %}
                                    <div class='pl-4'>Ajout révision</i></div>
                                
                                {% elseif timeline.type == "assignees" %}
                                    <div class='pl-4'>Affecté intervenant <i>{{timeline.assignee.login}}</i></div>
                                
                                {% elseif timeline.type == "commit_ref" %}
                                    <div class='pl-4'>Référencé depuis commit <i>#{{timeline.body|replace({'href="/':'target="_blank" href="'~giteaUrl~'/'})|raw}}</i></div>
                                
                                {% elseif timeline.type == "merge_pull" %}
                                <div class='pl-4'>Révision fusionnée</div>
                                
                                {% elseif timeline.type == "delete_branch" %}
                                <div class='pl-4'>Suppression branche {{timeline.old_ref|raw}}</div>

                                {% elseif timeline.type == "close" %}
                                    <div class='pl-4'>Clos <i>Fermeture du ticket</i></div>

                                {% elseif timeline.type == "review" %}
                                    <div class='pl-4'>Revue acceptée</div>

                                {% elseif timeline.type == "review_request" %}
                                    <div class='pl-4'>Demande de révision</div>

                                {% elseif timeline.type == "reopen" %}
                                    <div class='pl-4'>Réouverture du ticket</div>

                                {% else %}
                                    {{ dump(timeline) }}
                                {%endif%}
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            {% endif %}                
        </div>
    </div>

    <div id="mymodalissue" class="modal" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Estimation</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                
                <div class="modal-body">
                    <div class="form-group ">
                        <label class="control-label required" for="issu_weight">
                            Poid
                        </label>
                        <input type="hidden" id="modal-issueid" name="modal-issueid" required="required" class=" form-control" value="">
                        <input type="number" placeholder="0.0" step="0.1" id="modal-issueweight" name="modal-issueweight" required="required" class=" form-control" value="">
                    </div>
                    <button id="issu_update" class="btn btn-success">Enregistrer</button>
                </div>            
            </div>
        </div>
    </div>
{% endblock %}

{% block localjavascript %}
    $(document).on('click','.modissu',function(){
        $.ajax({
            method: "POST",
            url: "{{path("app_scrumissue_info")}}",
            data: {
                id:{{issue.nineid}},
            },
            success: function(data) {
                $("#modal-issueweight").val(data.weight);
                $("#mymodalissue").modal('show');
                $("#modal-issueweight").focus();
            },
        });                   
    });

    $("#issu_update").click(function(){
        $.ajax({
            method: "POST",
            url: "{{path("app_scrumissue_update")}}",
            data: {
                id:{{issue.nineid}},
                weight:$("#modal-issueweight").val(),
            },
            success: function(data) {
                parent.$(".issue{{issue.nineid}}-weight").html($("#modal-issueweight").val());
                window.parent.refreshinfo();
                location.reload();
            },
            error: function (request, status, error) {
                $("#mymodalissue").modal('hide');
            }
        });        
    });    
{% endblock %}