<!--
     This file is part of the happyDomain (R) project.
     Copyright (c) 2022-2025 happyDomain
     Authors: Pierre-Olivier Mercier, et al.

     This program is offered under a commercial and under the AGPL license.
     For commercial licensing, contact us at <contact@happydomain.org>.

     For AGPL licensing:
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU Affero General Public License as published by
     the Free Software Foundation, either version 3 of the License, or
     (at your option) any later version.

     This program is distributed in the hope that it will be useful,
     but WITHOUT ANY WARRANTY; without even the implied warranty of
     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
     GNU Affero General Public License for more details.

     You should have received a copy of the GNU Affero General Public License
     along with this program.  If not, see <https://www.gnu.org/licenses/>.
-->

<script lang="ts">
    import { Button, Card, Icon } from "@sveltestrap/sveltestrap";

    import DomainGroupList from "$lib/components/forms/DomainGroupList.svelte";
    import DomainGroupModal, { controls as ctrlDomainGroup } from "$lib/components/modals/DomainGroup.svelte";
    import NewDomainGroupModal, { controls as ctrlNewDomainGroup } from "$lib/components/modals/NewDomainGroup.svelte";
    import { domains } from "$lib/stores/domains";
    import { t } from "$lib/translations";

    interface Props {
        class?: string;
        filteredGroup?: string | null;
    }

    let { class: className = "", filteredGroup = $bindable(null) }: Props = $props();
</script>

{#if $domains && $domains.length}
    <Card class="mb-3 ${className}">
        <div class="card-header d-flex justify-content-between align-items-center">
            {$t("domaingroups.title")}
            <div>
                <Button
                    type="button"
                    size="sm"
                    color="light"
                    class="d-none d-lg-inline-block"
                    title={$t("domaingroups.new")}
                    on:click={() => ctrlNewDomainGroup.Open()}
                >
                    <Icon name="plus-lg" />
                </Button>
                <Button
                    type="button"
                    size="sm"
                    color="light"
                    class="d-lg-none"
                    title={$t("domaingroups.manage")}
                    on:click={() => ctrlDomainGroup.Open()}
                >
                    <Icon name="grid-fill" />
                </Button>
            </div>
        </div>
        <DomainGroupList flush bind:selectedGroup={filteredGroup} />
    </Card>
{/if}

<NewDomainGroupModal />
<DomainGroupModal />
