<script src="{{ host_prefix }}/static/js/lib/underscore-min.js"></script>
<script src="{{ host_prefix }}/static/js/lib/backbone-min.js"></script>
<script src="{{ host_prefix }}/static/js/lib/backbone-relational.js"></script>
<script src="{{ host_prefix }}/static/js/lib/backbone.marionette.min.js"></script>
<script src="{{ host_prefix }}/static/js/lib/underscore.string.min.js"></script>
<script src="{{ host_prefix }}/static/js/span-annotator.js"></script>

<div class="modal fade" id="exampleAnnotation" tabindex="-1" aria-labelledby="exampleAnnotationLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleAnnotationLabel">Example annotation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info" role="alert">
                    <p>Here you can interactively create an example that will be appended to the prompt template:</p>
                    <ul>
                        <li>Insert the example <b>input data</b> and example <b>output</b> generated from the data.</li>
                        <li>Annotate <b>manually</b> the example output.</li>
                        <li>Add <b>reasons</b> for each annotation in the table below.</li>
                        <li>Click on the <b>Paste example into prompt template</b> button.</li>
                    </ul>
                </div>
                <div id='output-content'>
                    <div class="row g-3 mb-3 align-items-center">
                        <div class="col-auto">
                            <i class="fa fa-code"></i>
                            <span style=" margin-left: 5px; margin-right: 10px;">Input data</span>
                            <div class="mb-2">
                                <small class="form-text text-muted">Insert the example input data. Try to select an
                                    example which is representative of the data you want to annotate, but short
                                    enough
                                    to fit the prompt.
                                </small>
                            </div>
                        </div>
                        <div class="form-group mt-1">
                            <textarea class="form-control" id="example-data" name="example-data" rows="3"></textarea>
                        </div>
                    </div>
                    <!-- textarea for the example content -->
                    <div class="row g-3 mb-3 align-items-center">
                        <div class="col-auto">
                            <i class="fa fa-align-left"></i>
                            <span style="margin-left: 5px; margin-right: 10px;">Example text</span>
                            <div class="mb-2">
                                <small class="form-text text-muted">Insert the example output generated from the data.
                                </small>
                            </div>
                        </div>
                        <div class="form-group mt-1">
                            <textarea class="form-control" id="example-text" name="example-text" rows="3"></textarea>
                        </div>
                    </div>
                    <div style="text-align: center;">
                        <button type="button" class="btn btn-outline-secondary mt-1"
                            onclick='initAnnotation();'>Annotate!</button>
                    </div>
                    <div id="nextsteparea" style="display: none;">
                        <div class="mt-3 mb-4" role="group" id="buttons-area"
                            aria-label="Basic radio toggle button group">
                        </div>
                        <div class="row g-3 mb-3 align-items-center">
                            <div class="col-auto">
                                <i class="fa fa-pencil"></i>
                                <span style="margin-left: 5px; margin-right: 10px;">Annotation area</span>
                                <div class="mb-2">
                                    <small class="form-text text-muted">Select the desired
                                        annotation category and annotate the text by dragging the mouse over selected
                                        spans. You can also click on an
                                        existing
                                        annotation to delete it. Add reasons for each annotation in the table below.
                                    </small>
                                </div>
                            </div>
                            <div class="p-3">
                                <div class="card mt-1">
                                    <div class="card-body">
                                        <div class="card-text" id="annotationarea">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row g-3 mb-3 align-items-center">
                            <div id='errortable'>
                                <table class="table table-sm table-bordered">
                                    <thead>
                                        <tr>
                                            <th scope="col">Category</th>
                                            <th scope="col">Text</th>
                                            <th scope="col">Reason</th>
                                        </tr>
                                    </thead>
                                    <tbody id="errorarea">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <pre id='outputarea'>
                        </pre>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="pasteExampleIntoPrompt();">Paste example into
                    prompt
                    template</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script src="{{ host_prefix }}/static/js/example-annotation.js"></script>