{% if token.payload.basicOutcome %}
    <div class="alert alert-info" role="alert">
        <i class="fas fa-poll"></i>&nbsp;
        Basic outcome claim provided in message
    </div>
    <div class="accordion md-accordion" id="accordionBoDetails" role="tablist" aria-multiselectable="true">
        <div class="card bg-light">
            <div class="card-header dropdown-toggle clickable collapsed" role="tab" id="accordionBoDetailsHeading" data-toggle="collapse" data-parent="#accordionBoDetails" href="#accordionBoDetailsBody"
                 aria-expanded="false" aria-controls="accordionBoDetailsBody">
                <i class="fas fa-info-circle"></i>&nbsp;Basic outcome claim details
            </div>
            <div id="accordionBoDetailsBody" class="collapse card-body" role="tabpanel" aria-labelledby="accordionBoDetailsHeading" data-parent="#accordionBoDetails">
                <div class="row">
                    <div class="col-md-6">
                        <dl class="list-unstyled">
                            <dt>Claim service url</dt>
                            <dd><a href="{{ token.payload.basicOutcome.lisOutcomeServiceUrl }}" target="_blank">{{ token.payload.basicOutcome.lisOutcomeServiceUrl }}</a></dd>
                        </dl>
                    </div>
                    <div class="col-md-6">
                        <dl class="list-unstyled">
                            <dt>Claim result sourced id</dt>
                            <dd><code>{{ token.payload.basicOutcome.lisResultSourcedId }}</code></dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br/>
    <div class="card bg-light">
        <div class="card-header">
            <i class="fas fa-sign-in-alt"></i>&nbsp;Basic outcome service request
        </div>
        <div class="card-body">
            <div class="form-row">
                <div class="col col col-md-8">
                    <input type="text" id="boUrl" class="form-control" placeholder="Service Url" value="{{ token.payload.basicOutcome.lisOutcomeServiceUrl }}" aria-describedby="boUrlHelp" readonly>
                    <small id="boUrlHelp" class="form-text text-muted">Service url</small>
                </div>
                <div class="col col col-md-4">
                    <input type="text" id="boResultSourcedId" class="form-control" placeholder="LIS Result Sourced ID" value="{{ token.payload.basicOutcome.lisResultSourcedId }}" readonly>
                    <small id="boResultSourcedIdHelp" class="form-text text-muted">Result sourced id</small>
                </div>
            </div>
            <br/>
            <div class="form-row">
                <div class="col col col-md-4">
                    <div class="form-group">
                        <select id="boOperation" aria-describedby="boOperationHelp" class="form-control">
                            <option value="readResult" selected="selected">Read result</option>
                            <option value="replaceResult">Replace result</option>
                            <option value="deleteResult">Delete result</option>
                        </select>
                        <small id="boOperationHelp" class="form-text text-muted">Operation type</small>
                    </div>
                </div>
                <div class="col col col-md-4">
                    <input type="text" id="boScore" class="form-control" placeholder="Score" aria-describedby="boScoreHelp">
                    <small id="boScoreHelp" class="form-text text-muted">Score</small>
                </div>
                <div class="col col col-md-4">
                    <input type="text" id="boLanguage"class="form-control" placeholder="Language" aria-describedby="boLanguageHelp">
                    <small id="boLanguageHelp" class="form-text text-muted">Language</small>
                </div>
            </div>
        </div>
        <div class="card-footer text-muted">
            <div class="btn-group float-right" role="group" aria-label="Basic example">
                <button id="boLoad" class="btn-primary btn">
                    <i id="boCall" class="fas fa-sign-in-alt"></i>&nbsp;Call basic outcome service
                </button>
                <button id="boReset" class="btn-secondary btn">
                    <i class="fas fa-undo"></i>&nbsp;Reset
                </button>
            </div>
        </div>
    </div>
    <div id="boZone"></div>
    <script>
        $("#boLoad").click(function(){
            $.ajax({
                url: "{{ path('tool_ajax_service_basic_outcome') }}",
                method: "POST",
                data: {
                    registration: "{{ token.registration.identifier }}",
                    url: $("#boUrl").val(),
                    operation: $("#boOperation").val(),
                    resultSourcedId: $("#boResultSourcedId").val(),
                    score: $("#boScore").val(),
                    language: $("#boLanguage").val()
                },
                beforeSend: function(result){
                    $("#boCall").removeClass("fa-sign-in-alt");
                    $("#boCall").addClass("fa-spinner fa-spin");
                },
                success: function(result){
                    $("#boCall").removeClass("fa-spinner fa-spin");
                    $("#boCall").addClass("fa-sign-in-alt");
                    $("#boZone").html(result);
                },
                error: function(result){
                    console.log(result);
                    $("#boCall").removeClass("fa-spinner fa-spin");
                    $("#boCall").addClass("fa-sign-in-alt");
                    $("#boZone").html(
                        '<br/><div class="card bg-light">' +
                            '<div class="card-header"><i class="fas fa-poll"></i>&nbsp;Basic outcome service response</div>' +
                            '<div class="card-body">' +
                                '<h5 class="card-title"></h5>' +
                                '<div class="alert alert-danger" role="alert">'+
                                '<i class="fas fa-exclamation-circle"></i>&nbsp;Error ' +
                                result.responseJSON.code +
                                ': ' +
                                result.responseJSON.message +
                                '</div>' +
                            '</div>' +
                        '</div>'
                    );
                }
            });
        });

        $("#boReset").click(function(){
            $("#boZone").html("");
            $("#boOperation").val("readResult");
            $("#boScore").val("");
            $("#boLanguage").val("");
        });
    </script>
{% else %}
    <div class="alert alert-dark alert-no-margin-bottom" role="alert">
        <i class="fas fa-ban"></i>&nbsp;No basic outcome claim provided in message
    </div>
{% endif %}