<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>corpus annotation</title>
    <!-- Favicon-->
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
    <!-- Core theme CSS (includes Bootstrap)-->
    <link rel="stylesheet" href="{{url_for('static', filename='css/styles.css')}}" />
    <link rel="stylesheet" href="{{url_for('static', filename='css/pylacoan.css')}}" />
    <link rel="stylesheet" href="{{url_for('static', filename='css/annotation.css')}}" />
</head>
<body>
    <div class="d-flex" id="wrapper">
        <!-- Sidebar-->
        <div class="border-end bg-white" id="sidebar-wrapper">
            <div class="sidebar-heading border-bottom bg-light">pylacoan</div>
            <div class="list-group list-group-flush" id="textlist">
            </div>
        </div>
        <!-- Page content wrapper-->
        <div id="page-content-wrapper">
            <!-- Top navigation-->
            <nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light border-bottom">
                <div class="container-fluid">

                    <div class="navbar-nav">

                        <a class="nav-link active" aria-current="page" href="#">Annotation</a>
                        <a class="nav-link" aria-current="page" href="/concordance">Concordance search</a>
                    </div>

                </div>
            </nav>

            <!-- Page content-->
            <div class="container-fluid h-100">
                <div class="row h-100">
                    <div class="col-10">
                        <ol id="examples">
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- jquery JS-->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
    <!-- Bootstrap core JS-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Core theme JS-->
    <script src="{{url_for('static', filename='js/scripts.js')}}"></script>
    <script src="{{url_for('static', filename='js/annotation.js')}}"></script>
    <script>
        $.get(
        {
            url: "/texts",
            async: false,
            success: function (textIDs) {
                for (let i = 0; i < textIDs.length; i++) {
                        // $("#textlist").append('<a id='+textIDs[i]+' class="textLink list-group-item list-group-item-action list-group-item-light p-3" href="#!">'+textIDs[i]+'</a>')
                    $("#textlist").append(
                                          `<a class="list-group-item list-group-item-action list-group-item-light p-3" href="/annotation/${textIDs[i]}">${textIDs[i]}</a>`,
                                          );
                }
                if ("{{text_id}}" != "") {
                    loadText("{{text_id}}");
                } else {
                    loadText(textIDs[0]);
                }
            },
        }
        );
    </script>
</body>
</html>