<div class="container-fluid h-100">
    <div class="row h-100">
        <div class="col-md-9">
            <div class="position-relative">
                <button type="button" class="btn btn-light back-button top-0 start-0 m-3" onclick="loadView('home')">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"/>
                    </svg>
                    Back
                </button>
            </div>
            <section class="py-5">
                <div class="container text-center">
                    <h1 class="display-4"><strong>Cooperate Cleaner</strong></h1>
                    <p class="lead mb-3">Enter your text, clear, done</p>

                    <h2>Input:</h2>
                    <textarea class="form-control w-100" rows="10" id="input-textarea"></textarea>
                    <button type="button" class="btn btn-success mt-5" id="cleaner-clean-btn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cpu" viewBox="0 0 16 16">
                            <path d="M5 0a.5.5 0 0 1 .5.5V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2A2.5 2.5 0 0 1 14 4.5h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14a2.5 2.5 0 0 1-2.5 2.5v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14A2.5 2.5 0 0 1 2 11.5H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2A2.5 2.5 0 0 1 4.5 2V.5A.5.5 0 0 1 5 0m-.5 3A1.5 1.5 0 0 0 3 4.5v7A1.5 1.5 0 0 0 4.5 13h7a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 11.5 3zM5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5zM6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z"/>
                        </svg>
                        Clear my input
                    </button>
                    <div class="visually-hidden" id="output-container-div">
                        <h2 class="mt-5">Output:</h2>
                        <textarea class="form-control w-100" rows="10" id="output-textarea"></textarea>
                    </div>
                </div>
            </section>
        </div>
        <div class="col-md-3">
            <div class="sidebar h-100 d-flex flex-column justify-content-center ps-4 pe-4">
                <h2>Quick Settings</h2>
                <h4 class="mt-4">Auto copy</h4>
                <div class="form-check ms-3">
                    <input class="form-check-input" type="checkbox" value="" id="enable-auto-copy" checked>
                    <label class="form-check-label" for="enable-auto-copy">
                        Enable auto copy to clipboard
                    </label>
                </div>
                <h4 class="mt-4">Enabled filters</h4>
                <ul class="list-group list-group-flush" id="filter-list">
                    <!-- Filter checkboxes will be dynamically added here -->
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </ul>
            </div>
        </div>
    </div>
</div>
