{{ block scripts }}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
    <script src="{{ static 'js/bootstrap_components.js' }}"></script>
    <script src="{{ static 'js/preloader.js' }}"></script>
    <script src="{{ static 'js/format_numbers.js' }}"></script>
    <script src="{{ static 'js/mobile.js' }}"></script>
    <script src="{{ static 'js/like_button.js' }}"></script>
    <script src="{{ static 'js/interactions.js' }}"></script>
    <script src="{{ static 'js/dwell.js' }}"></script>
    <script src="{{ static 'js/focal_line.js' }}"></script>
    <script src="{{ static 'js/lottery.js' }}"></script>
    <script src="{{ static 'js/lazy_load.js' }}"></script>
    <script src="{{ static 'js/rowheights.js' }}"></script>
{{ endblock }}

{{ block styles }}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lobster&display=swap">
    <link rel="stylesheet" href="{{ static 'css/styles.css' }}">
    <link rel="shortcut icon" type="image/x-icon" href="{{ static 'img/favicon.ico' }}">
    <link rel="stylesheet" href="{{ static 'css/user_icon.css' }}">
    <link rel="stylesheet" href="{{ static 'css/preloader.css' }}">
{{ endblock }}

{{ block content }}

<div class="bg-light m-0 p-0">

    <!-- Hidden Fields -->
    <input type="hidden" name="dwell_data" id="dwell_data" value="">
    <input type="hidden" name="rowheight_data" id="rowheight_data" value="">
    <input type="hidden" id="likes_data" name="likes_data">
    <input type="hidden" id="replies_data" name="replies_data">
    <input type="hidden" id="is_touch_device" name="is_touch_device" value="">
    <input type="hidden" id="device_type" name="device_type" value="">
    <input type="hidden" id="screen_resolution" name="screen_resolution" value="">
    <input type="hidden" id="lottery_signup" name="lottery_signup" value="">
    <input type="hidden" id="time_on_feed" name="time_on_feed" value="">
    <input type="hidden" id="focal_line_data" name="focal_line_data" value="">

    <!-- Loading Screen -->
    <div id="loadingScreen" class="d-flex justify-content-center align-items-center loading-bg" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999;">
        <i class="bi bi-chat-dots text-white logo-animate" style="font-size: 4rem;"></i>
    </div>

    <!-- Main Content -->
    <div class="container-fluid d-flex justify-content-center align-items-center p-0" style="max-width: 1200px;" id="mainContent">

        <div class="row p-0 m-0">

            <!-- LHS -->
            <div class="col overflow-auto d-none d-md-block col-md-3 py-0 pe-5 full-height" id="LHS">
                <div class="d-flex justify-content-end">
                    <div>
                        <h1 class="mt-3 ms-3">
                            <i class="bi bi-chat-dots text-primary"></i>
                        </h1>

                        <div class="btn-group-vertical">
                            <button class="btn btn-light rounded-5 mt-5 text-start text-secondary" type="button" disabled>
                                <i class="bi bi-house"></i> Home
                            </button>
                            <button class="btn btn-light rounded-5 mt-3 text-start text-dark" type="button" disabled>
                                <i class="bi bi-hash"></i>
                                <b>Explore</b>
                            </button>
                            <button class="btn btn-light rounded-5 mt-3 text-start text-secondary" type="button" disabled>
                                <i class="bi bi-bell"></i> Notifications
                            </button>
                            <button class="btn btn-light rounded-5 mt-3 text-start text-secondary" type="button" disabled>
                                <i class="bi bi-envelope"></i> Messages
                            </button>
                            <button class="btn btn-light rounded-5 mt-3 text-start text-secondary" type="button" disabled>
                                <i class="bi bi-bookmark"></i> Bookmarks
                            </button>
                            <button class="btn btn-light rounded-5 mt-3 text-start text-secondary" type="button" disabled>
                                <i class="bi bi-file-medical"></i> Lists
                            </button>
                            <button class="btn btn-light rounded-5 mt-3 text-start text-secondary" type="button" disabled>
                                <i class="bi bi-person-circle"></i> Profile
                            </button>

                            <input class="btn btn-primary rounded-5 mt-5 mb-5" type="button" value="Post"
                                   data-bs-toggle="modal" data-bs-target="#postModal">
                        </div>

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

            <!-- Feed -->
            <div class="col overflow-auto col-sm-12 col-md-6 col-lg-6 p-0 bg-white" id="feedColumn" style="height: 100vh;">

                <!-- Navbar -->
                <div class="d-flex m-0 p-0 sticky-top justify-content-center bg-white shadow-sm"
                     style="opacity:0.95">

                    <input class="form-control m-3 rounded-5 text-dark"
                       type="text"
                       value="{{ search_term }}"
                       aria-label="readonly input example"
                       style="background-color:  #FFFFFF"
                       readonly>

                    <button class="btn btn-dark rounded-pill m-3 px-4" id="submitButtonTop" type="submit" style="display: none; white-space: nowrap;" title="Click here when you are done browsing">
                        <i class="bi bi-box-arrow-right me-1"></i> Done browsing
                    </button>
                </div>

                <table class="table table-hover border-start border-end p-0 m-0 bg-white" id="post_table">
                    <tbody>

                        {{ for i in posts.values() }}
                            {{ include C.ITEM_POST }}
                        {{ endfor }}

                        <!-- End of feed -->
                        <tr class="bg-light">
                            <td class="d-flex flex-column align-items-center py-5">
                                <div class="p-3">
                                    <i class="bi bi-check-circle text-secondary" style="font-size: 48px;"></i>
                                </div>
                                <div class="text-center mb-3">
                                    <p class="fw-semibold mb-1">You're all caught up</p>
                                    <small class="text-muted">You've seen all new posts from the past 3 days.</small>
                                </div>
                                <div class="my-3">
                                    <button class="btn btn-dark btn-sm rounded-pill px-4 py-2" id="submitButtonBottom" type="submit">
                                        Proceed to survey
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- RHS -->
            <div class="col overflow-auto d-none d-md-block col-md-3 p-0 full-height" id="RHS" style="position: relative;">
                {{ include C.TOPICS_TEMPLATE }}
            </div>
        </div>
    </div>

    <!-- Post Modal -->
    <div class="modal fade" id="postModal" tabindex="-1" aria-labelledby="postModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row text-secondary">
                        <div class="col-2">
                            <h1 class="text-end">
                                <i class="bi bi-person-circle sticky-bottom" data-bs-toggle="popover"
                                   data-bs-content="You have been assigned the following ID: {{ participant.code }}. Please use it to identify yourself if you encounter any problems."></i>
                            </h1>
                        </div>
                        <div class="col">
                                <textarea class="form-control border-light" id="post1" rows="4"
                                          placeholder="What are the first thoughts and feelings that come to your mind when you are scrolling through the entire feed?"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-primary w-25 rounded-5"
                            data-bs-dismiss="modal">Post
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Lottery toast -->
    <div class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index: 9999;">
        <div id="lotteryToast" class="toast text-white border-0" role="alert" style="background: #0063E5;">
            <div class="d-flex align-items-center p-3">
                <div class="toast-body p-0">
                    🎟 You're in the draw! Good luck — winners will be notified via Prolific.
                </div>
                <button type="button" class="btn-close btn-close-white ms-auto me-1 flex-shrink-0" data-bs-dismiss="toast"></button>
            </div>
        </div>
    </div>

</div>
{{ endblock }}