<Layout::Section::Header @title={{t "storefront.common.food-trucks"}}>
    <Button @type="primary" @icon="plus" @text={{t "storefront.common.new"}} @onClick={{this.createFoodTruck}} @permission="storefront create food-truck" class="mr-2" />
    <Button @icon="long-arrow-up" @iconClass="rotate-icon-45" @text={{t "storefront.common.export"}} @permission="storefront export food-truck" />
</Layout::Section::Header>

<Layout::Section::Body>
    <div class="p-4">
        <div class="grid grid-cols-3 gap-4">
            {{#each @model as |foodTruck|}}
                <div class="px-2 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 border-gray-200 bg-gray-100">
                    <div class="flex flex-row mb-2">
                        <div class="mr-2">
                            <Image src={{foodTruck.vehicle.photo_url}} class="w-14 h-14 rounded-md shadow-sm" />
                        </div>
                        <div class="flex flex-col flex-1">
                            <div class="text-sm font-semibold mb-0.5">{{foodTruck.vehicle.display_name}}</div>
                            <div class="flex flex-row items-center space-x-1">
                                <FaIcon @icon="draw-polygon" class="mr-1" />
                                <div class="text-sm">{{n-a foodTruck.service_area.name}}</div>
                                <div>•</div>
                                <div class="text-sm">{{n-a foodTruck.zone.name}}</div>
                            </div>
                            {{!-- <div>{{format-point foodTruck.vehicle.location}}</div> --}}
                            <Badge @status={{foodTruck.status}} @hideStatusDot={{true}} />
                        </div>
                    </div>
                    <div class="mt-2 flex flex-row space-x-2">
                        <Button
                            @type="default"
                            @icon="pencil"
                            @text={{t "storefront.common.edit"}}
                            @onClick={{fn this.editFoodTruck foodTruck}}
                            @permission="storefront update food-truck"
                            @size="xs"
                        />
                        <Button @type="default" @icon="square-check" @text="Catalogs" @onClick={{fn this.assignCatalogs foodTruck}} @permission="storefront update food-truck" @size="xs" />
                        <Button
                            @type="danger"
                            @icon="trash"
                            @text={{t "storefront.common.delete"}}
                            @onClick={{fn this.deleteFoodTruck foodTruck}}
                            @permission="storefront delete food-truck"
                            @size="xs"
                        />
                    </div>
                </div>
            {{/each}}
        </div>
    </div>
</Layout::Section::Body>

{{outlet}}