
<svelte:head>
	<title>Catalog - Rowblox</title>
</svelte:head>




<div class="row-auto">
    <div class="float-left my-16 border-2 rounded-lg">
        <div class="card card-body p-3 shadow-lg">
           <h4>
            <b>Catergories</b>
           </h4>
        <div class="form-check">
            <input class="form-check-input" type="radio" id="hats" name="category">
            <label class="form-check-label"for="hats">Hats</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" id="hats" name="category">
            <label class="form-check-label"for="hats">Shirts</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" id="hats" name="category">
            <label class="form-check-label"for="hats">Pants</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" id="hats" name="category">
            <label class="form-check-label"for="hats">T-Shirts</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" id="hats" name="category">
            <label class="form-check-label"for="hats">Faces</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" id="hats" name="category">
            <label class="form-check-label"for="hats">Heads</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" id="hats" name="category">
            <label class="form-check-label"for="hats">Gears</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" id="hats" name="category">
            <label class="form-check-label"for="hats">Packages</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" id="hats" name="category">
            <label class="form-check-label"for="hats">Models</label>
        </div>
       </div>
   </div>
   
   <div class="flex items-center">
       <p class="font-bold text-3xl my-1">Catalog</p>
       <span class="flex-grow" />
       <input class="rounded px-2 border-2 border-grey-300 text-black mr-2 py-1" type="text" name="search" id="search" placeholder="Search" />
       <button class="text-lg px-3 py-0.5 rounded border-2 border-blue-500 shadow-lg cursor-pointer hover:bg-blue-200 text-blue-500 mr-2">Search</button>
       <a class="text-lg px-3 py-0.5 rounded border-2 border-blue-500 shadow-lg cursor-pointer hover:bg-blue-200 text-blue-500" href="/Create/Asset">Create Asset</a>
   </div>
   <div class="mx-48 pb-3 px-2 py-6">
       <div class="card card-body shadow-lg p-2 rounded-lg w-40 border-2 py-2">
           <a href="/catalog/items">
               <!-- svelte-ignore a11y-missing-attribute -->
               <img src="/img/hatrowblox.png">
               <div class="mt-1 text-truncate">Traffic Cone</div>
           </a>
           <hr class="my-2">
           <div class="text-s mt-1 mb-1">
               <small> 
                <img src="/img/rowbux.png" width="20" height="50" style="float:left">
                <p class="text-xs font-bold"> -21</p>
                <p class="text-xs font-bold"> By: Row</p>
   
                   </small>
   
                   </div>
       </div>
   </div>
</div>


