<form [formGroup]="form" (ngSubmit)="submit()" novalidate>
    <accordion [isAnimated]="true">
        <accordion-group heading="General information" [isOpen]="true">
            <div class="form-group">
                <label for="name">Name</label>
                <input id="name" type="text" class="form-control" id="name" name="name" formControlName="name">
            </div>
            <div class="form-group">
                <label for="label">Label</label>
                <input id="label" type="text" class="form-control" id="label" name="label" formControlName="label">
            </div>
            <div class="form-group">
                <label for="client_url">Client URL</label>
                <input id="client_url" type="text" class="form-control" id="client_url" name="client_url" formControlName="client_url">
            </div>
        </accordion-group>
        <div formGroupName="config">
            <accordion-group heading="Search" formGroupName="search">
                <div class="custom-control custom-switch">
                    <input class="custom-control-input" type="checkbox" id="search_by_criteria_allowed" name="search_by_criteria_allowed" formControlName="search_by_criteria_allowed">
                    <label class="custom-control-label" for="search_by_criteria_allowed">Classic search allowed</label>
                </div>
                <div class="custom-control custom-switch">
                    <input class="custom-control-input" type="checkbox" id="search_multiple_allowed" name="search_multiple_allowed" formControlName="search_multiple_allowed" (change)="checkDisableAllDatasetsSelected()">
                    <label class="custom-control-label" for="search_multiple_allowed">Search multiple allowed</label>
                </div>
                <div class="custom-control custom-switch">
                    <input class="custom-control-input"
                        type="checkbox"
                        id="search_multiple_all_datasets_selected"
                        name="search_multiple_all_datasets_selected"
                        formControlName="search_multiple_all_datasets_selected">
                    <label class="custom-control-label" for="search_multiple_all_datasets_selected">All datasets with cone search enabled selected by default</label>
                </div>
            </accordion-group>
            <accordion-group heading="Documentation" formGroupName="documentation">
                <div class="custom-control custom-switch">
                    <input class="custom-control-input" type="checkbox" id="documentation_allowed" name="documentation_allowed" formControlName="documentation_allowed">
                    <label class="custom-control-label" for="documentation_allowed">Documentation allowed</label>
                </div>
            </accordion-group>
        </div>
    </accordion>
    <div class="form-group pt-4">
        <ng-content></ng-content>
    </div>
</form>