{{--
/**
 * *************************** FLAGGED FOR DELETION ***************************
 *
 * ========== DEPRECATED ========== DEPRECATED ========== DEPRECATED ==========
 * ******** THIS LIVEWIRE VIEW/COMPONENT WILL BE DELETED IN NEXT COMMIT ********
 * ========== DEPRECATED ========== DEPRECATED ========== DEPRECATED ==========
 *
 * *************************** FLAGGED FOR DELETION ***************************
 */
--}}

<div wire:init="loadPage" class="py-5" id="functions">
    <h2>Functions</h2>
    <h6 class="py-0 my-0 text-center">Search for a function by name or description:</h6>
    <div class="d-flex flex-row justify-content-center pt-2 pb-3">
        <input type="text" id="function-search-field-function-table" class="input-field"/>
    </div>
    <h4 id="function-search-no-functions-found" class="text-center" hidden>No functions match your search query.</h4>

        <table id="list-functions-table" class="table-responsive w-100-percent">
            <thead class="w-100-percent">
                <th id="functions-table-th-httpMethod" class="text-center">HTTP Method</th>
                <th id="functions-table-th-name" class="text-center">Route</th>
                <th id="functions-table-th-description" class="text-center">Description</th>
                <th id="functions-table-th-outputType" class="text-center">Output type</th>
                <th id="functions-table-th-placeHolder" class="text-center"></th>
            </thead>
            <tbody class="overflow-y-scroll w-100-percent">
                @foreach($functions as $function)
                <tr class="function-table-row small">
                    <td class="w-15-percent text-center font-weight-800 http-method-{{ strtolower($function->httpMethod) }}">{{ $function->httpMethod }}</td>
                    <td class="w-15-percent text-center function-table-row-name">
                        @if($function->trimFrom !== null)
                        <strong>{{ substr($function->route, 0, $function->trimFrom) }}</strong><span class="text-success">[params]</span>
                        @else
                        <strong>{{ $function->route }}</strong>
                        @endif
                    </td>
                    <td class="w-45-percent function-table-row-description"><em>{{ $function->description }}</em></td>
                    <td class="w-15-percent text-center datatype-color-{{ strtolower($function->outputType) }}"><em>{{ $function->outputType }}</em></td>
                    <td class="w-10-percent text-center"><button class="show-function-page-button" data-function-route="{{ $function->route }}" wire:click="$set('functionPage', $function->componentPath)">View</button></td>
                </tr>
                @endforeach
            </tbody>
        </table>


    <div data-function-route="NULL" class="embedded-function-page my-5 py-2 alert alert-primary w-50-percent mx-auto">
        <p class="text-center" style="font-weight: 600">To view a function, search for it in the table and click View.</p>
        <p class="text-center">If only one function matches the search criteria, it will show automatically.</p>
        <p class="text-center small">Note: current function descriptions are subject to changes and updates.</p>
    </div>
    @foreach($functions as $function)
    <div id="function-{{ $function->route }}" data-function-route="{{ $function->route }}" class="embedded-function-page my-5" hidden aria-hidden>
        @include('functions.'.$function->componentPath, ['functionName' => $function->name, 'endpointRoute' => $function->route, 'briefDescription' => $function->description ])
    </div>
    @endforeach
</div>
<script src="{{ asset('js/function.show.js') }}"></script>