<!DOCTYPE html>
<html lang="en">
{{template "views/partials/head" .}}

<body class="bg-gray-900 text-gray-200">
<div class="flex flex-col min-h-screen">
   
    {{template "views/partials/navbar" .}}
    <div class="container mx-auto px-4 flex-grow">

        <div class="models mt-12">
            <h2 class="text-center text-3xl font-semibold text-gray-100">
                🖼️ Available models from <i>{{ len .Repositories }}</i> repositories     <a href="https://localai.io/models/" target="_blank" >
                    <i class="fas fa-circle-info pr-2"></i>
                </a></h2> 
            
        
            <span class="htmx-indicator loader"></span>
            <input class="form-control appearance-none block w-full px-3 py-2 text-base font-normal text-gray-300 pb-2 mb-5 bg-gray-800 bg-clip-padding border border-solid border-gray-600 rounded transition ease-in-out m-0 focus:text-gray-300 focus:bg-gray-900 focus:border-blue-500 focus:outline-none" type="search" 
                name="search" placeholder="Begin Typing To Search models..." 
                hx-post="/browse/search/models" 
                hx-trigger="input changed delay:500ms, search" 
                hx-target="#search-results" 
                hx-indicator=".htmx-indicator">

            <div id="search-results">{{.Models}}</div>
        </div>
    </div>

    {{template "views/partials/footer" .}}
</div>

</body>
</html>