<div class="overflow-x-auto">
    <!-- Column Toggle Checkboxes -->
    <div
        class="mb-4 flex flex-col sm:flex-row flex-wrap items-start sm:items-center space-y-2 sm:space-y-0 sm:space-x-6">
        <label class="inline-flex items-center space-x-2" for="toggle-endpoint">
            <input id="toggle-endpoint" type="checkbox" checked class="form-checkbox h-6 w-6 text-blue-600"
                data-column="col-endpoint" _="
                   on change 
                       if me.checked then
                           remove .hidden from .col-endpoint
                       else
                           add .hidden to .col-endpoint
               ">
            <span class="text-gray-700">Endpoint</span>
        </label>
        <label class="inline-flex items-center space-x-2" for="toggle-methods">
            <input id="toggle-methods" type="checkbox" checked class="form-checkbox h-6 w-6 text-blue-600"
                data-column="col-methods" _="
                   on change 
                       if me.checked then
                           remove .hidden from .col-methods
                       else
                           add .hidden to .col-methods
               ">
            <span class="text-gray-700">Methods</span>
        </label>
        <label class="inline-flex items-center space-x-2" for="toggle-url">
            <input id="toggle-url" type="checkbox" checked class="form-checkbox h-6 w-6 text-blue-600"
                data-column="col-url" _="
                   on change 
                       if me.checked then
                           remove .hidden from .col-url
                       else
                           add .hidden to .col-url
               ">
            <span class="text-gray-700">URL</span>
        </label>
        <label class="inline-flex items-center space-x-2" for="toggle-view_func">
            <input id="toggle-view_func" type="checkbox" checked class="form-checkbox h-6 w-6 text-blue-600"
                data-column="col-view_func" _="
                   on change 
                       if me.checked then
                           remove .hidden from .col-view_func
                       else
                           add .hidden to .col-view_func
               ">
            <span class="text-gray-700">View Function</span>
        </label>
        <label class="inline-flex items-center space-x-2" for="toggle-description">
            <input id="toggle-description" type="checkbox" checked class="form-checkbox h-6 w-6 text-blue-600"
                data-column="col-description" _="
                   on change 
                       if me.checked then
                           remove .hidden from .col-description
                       else
                           add .hidden to .col-description
               ">
            <span class="text-gray-700">Description</span>
        </label>
    </div>


    <!-- Endpoints Table -->
    <table class="min-w-full bg-white rounded-lg shadow">
        <thead class="bg-gray-200">
            <tr>
                <th class="py-2 px-4 border-b text-left text-sm font-medium text-gray-700 col-endpoint">Endpoint</th>
                <th class="py-2 px-4 border-b text-left text-sm font-medium text-gray-700 col-methods">Methods</th>
                <th class="py-2 px-4 border-b text-left text-sm font-medium text-gray-700 col-url">URL</th>
                <th class="py-2 px-4 border-b text-left text-sm font-medium text-gray-700 col-view_func">View Function
                </th>
                <th class="py-2 px-4 border-b text-left text-sm font-medium text-gray-700 col-description">Description
                </th>
            </tr>
        </thead>
        <tbody>
            {% for route in routes %}
            <tr class="hover:bg-gray-100 even:bg-gray-50">
                <td class="py-2 px-4 border-b text-sm text-gray-800 col-endpoint">{{ route.endpoint }}</td>
                <td class="py-2 px-4 border-b text-sm text-gray-800 col-methods">{{ route.methods }}</td>
                <td class="py-2 px-4 border-b text-sm text-gray-800 col-url">{{ route.url }}</td>
                <td class="py-2 px-4 border-b text-sm text-gray-800 col-view_func">{{ route.view_func }}</td>
                <td class="py-2 px-4 border-b text-sm text-gray-800 col-description">
                    {% if route.doc %}
                    <details class="group">
                        <summary class="cursor-pointer text-blue-600 hover:underline">
                            {{ route.doc.split('\n')[0] }}{% if route.doc.count('\n') > 0 %}...{% endif %}
                        </summary>
                        <div class="mt-2 text-gray-700">
                            {{ route.doc }}
                        </div>
                    </details>
                    {% else %}
                    N/A
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>