---
import { staticPath } from '@shared/lib/assets'
import CardActions from '@ui/CardActions.astro'
import Icon from '@ui/Icon.astro'
import brands from '@data/brands.json'
import CardTitle from '@ui/CardTitle.astro'
---

<!-- BEGIN APPS -->
<div class="nav-item dropdown d-none d-md-flex">
  <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" aria-label="Show app menu" data-bs-auto-close="outside" aria-expanded="false">
    <Icon name="apps" />
  </a>
  <!-- BEGIN NAVBAR APPS -->
  <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
    <div class="card">
      <div class="card-header">
        <CardTitle>My Apps</CardTitle>

        <CardActions class="btn-actions">
          <a href="#" class="btn btn-action" aria-label="App settings">
            <Icon name="settings" />
          </a>
        </CardActions>
      </div>
      <div class="card-body scroll-y p-2" style="max-height: 50vh">
        <div class="row g-0">
          {
            brands.map((brand) => (
              <div class="col-4">
                <a href="#" class="d-flex flex-column text-center text-secondary py-2 px-2 link-hoverable">
                  <img src={staticPath(`brands/${brand.image}`)} class="w-6 h-6 mx-auto mb-2" width="24" height="24" alt="" />
                  <span class="h5">{brand.name}</span>
                </a>
              </div>
            ))
          }
        </div>
      </div>
    </div>
  </div>
  <!-- END NAVBAR APPS -->
</div>
<!-- END APPS -->