<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 type="text" class="form-control" id="name" name="name" formControlName="name">
            </div>
            <div class="form-group">
                <label for="label">Label</label>
                <input type="text" class="form-control" id="label" name="label" formControlName="label">
            </div>
            <div class="form-group">
                <label for="description">Description</label>
                <textarea class="form-control" rows="5" id="description" name="description" formControlName="description"></textarea>
            </div>
            <div class="form-group">
                <label for="scientific_manager">Scientific manager</label>
                <input type="text" class="form-control" id="scientific_manager" name="scientific_manager" formControlName="scientific_manager">
            </div>
            <div class="form-group">
                <label for="instrument">Instrument</label>
                <input type="text" class="form-control" id="instrument" name="instrument" formControlName="instrument">
            </div>
            <div class="form-group">
                <label for="wavelength_domain">Wavelength domain</label>
                <input type="text" class="form-control" id="wavelength_domain" name="wavelength_domain" formControlName="wavelength_domain">
            </div>
            <div class="form-group">
                <label for="display">Display</label>
                <input type="number" class="form-control" id="display" name="display" formControlName="display">
            </div>
            <app-path-select-form-control
                [form]="form"
                [controlName]="'data_path'"
                [controlLabel]="'Data path'"
                [files]="files"
                [filesIsLoading]="filesIsLoading"
                [filesIsLoaded]="filesIsLoaded"
                [selectType]="'directory'"
                (loadDirectory)="loadRootDirectory.emit($event)">
            </app-path-select-form-control>
            <app-path-select-form-control
                [form]="form"
                [disabled]="isDataPathEmpty()"
                [controlName]="'files_path'"
                [controlLabel]="'Files path'"
                [files]="files"
                [filesIsLoading]="filesIsLoading"
                [filesIsLoaded]="filesIsLoaded"
                [selectType]="'directory'"
                (loadDirectory)="onChangeFilesPath($event)">
            </app-path-select-form-control>
            <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" class="custom-control-input" id="public" formControlName="public" [value]="true">
                <label class="custom-control-label" for="public"><span class="fas fa-globe"></span> Public</label>
            </div>
            <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" class="custom-control-input" id="private" formControlName="public" [value]="false">
                <label class="custom-control-label" for="private"><span class="fas fa-lock"></span> Private</label>
            </div>
        </accordion-group>
        <accordion-group heading="Design general" [isOpen]="false">
            <app-path-select-form-control
                [form]="form"
                [disabled]="isFilesPathEmpty()"
                [controlName]="'portal_logo'"
                [controlLabel]="'Portal logo'"
                [files]="files"
                [filesIsLoading]="filesIsLoading"
                [filesIsLoaded]="filesIsLoaded"
                [selectType]="'file'"
                (loadDirectory)="onChangeFileSelect($event)">
            </app-path-select-form-control>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="design_color_picker">Instance color (picker)</label>
                    <input class="form-control" type="color" id="design_color_picker" [value]="form.value.design_color" formControlName="design_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="design_color_input">Instance color (value)</label>
                    <input type="text" class="form-control" id="design_color_input" [value]="form.value.design_color" formControlName="design_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="design_background_color_picker">Instance background color (picker)</label>
                    <input class="form-control" type="color" id="design_background_color_picker" [value]="form.value.design_background_color" formControlName="design_background_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="design_background_color_input">Instance background color (value)</label>
                    <input type="text" class="form-control" id="design_background_color_input" [value]="form.value.design_background_color" formControlName="design_background_color">
                </div>
            </div>
            <app-path-select-form-control
                [form]="form"
                [disabled]="isFilesPathEmpty()"
                [controlName]="'design_favicon'"
                [controlLabel]="'Favicon'"
                [files]="files"
                [filesIsLoading]="filesIsLoading"
                [filesIsLoaded]="filesIsLoaded"
                [selectType]="'file'"
                (loadDirectory)="onChangeFileSelect($event)">
            </app-path-select-form-control>
        </accordion-group>
        <accordion-group heading="Design navbar" [isOpen]="false">
            <app-path-select-form-control
                [form]="form"
                [disabled]="isFilesPathEmpty()"
                [controlName]="'design_logo'"
                [controlLabel]="'Logo'"
                [files]="files"
                [filesIsLoading]="filesIsLoading"
                [filesIsLoaded]="filesIsLoaded"
                [selectType]="'file'"
                (loadDirectory)="onChangeFileSelect($event)">
            </app-path-select-form-control>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="navbar_background_color_picker">Navbar background color (picker)</label>
                    <input class="form-control" type="color" id="navbar_background_color_picker" [value]="form.value.navbar_background_color" formControlName="navbar_background_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="navbar_background_color_input">Navbar background color (value)</label>
                    <input type="text" class="form-control" id="navbar_background_color_input" [value]="form.value.navbar_background_color" formControlName="navbar_background_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="navbar_border_bottom_color_picker">Navbar border bottom color (picker)</label>
                    <input class="form-control" type="color" id="navbar_border_bottom_color_picker" [value]="form.value.navbar_border_bottom_color" formControlName="navbar_border_bottom_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="navbar_border_bottom_color_input">Navbar border bottom color (value)</label>
                    <input type="text" class="form-control" id="navbar_border_bottom_color_input" [value]="form.value.navbar_border_bottom_color" formControlName="navbar_border_bottom_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="navbar_color_href_picker">Navbar color href (picker)</label>
                    <input class="form-control" type="color" id="navbar_color_href_picker" [value]="form.value.navbar_color_href" formControlName="navbar_color_href">
                </div>
                <div class="form-group col-md-6">
                    <label for="navbar_color_href_input">Navbar color href (value)</label>
                    <input type="text" class="form-control" id="navbar_color_href_input" [value]="form.value.navbar_color_href" formControlName="navbar_color_href">
                </div>
            </div>
            <div class="form-group">
                <label for="navbar_font_family">Navbar font family</label>
                <input type="text" class="form-control" id="navbar_font_family" name="navbar_font_family" formControlName="navbar_font_family">
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="navbar_sign_in_btn_color_picker">Navbar sign in btn color (picker)</label>
                    <input class="form-control" type="color" id="navbar_sign_in_btn_color_picker" [value]="form.value.navbar_sign_in_btn_color" formControlName="navbar_sign_in_btn_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="navbar_sign_in_btn_color_input">Navbar sign in btn color (value)</label>
                    <input type="text" class="form-control" id="navbar_sign_in_btn_color_input" [value]="form.value.navbar_sign_in_btn_color" formControlName="navbar_sign_in_btn_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="navbar_user_btn_color_picker">Navbar user btn color (picker)</label>
                    <input class="form-control" type="color" id="navbar_user_btn_color_picker" [value]="form.value.navbar_user_btn_color" formControlName="navbar_user_btn_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="navbar_user_btn_color_input">Navbar user btn color (value)</label>
                    <input type="text" class="form-control" id="navbar_user_btn_color_input" [value]="form.value.navbar_user_btn_color" formControlName="navbar_user_btn_color">
                </div>
            </div>
            <div class="custom-control custom-switch mb-2">
                <input class="custom-control-input" type="checkbox" id="back_to_portal" name="back_to_portal" formControlName="back_to_portal">
                <label class="custom-control-label" for="back_to_portal">Back to portal</label>
            </div>
            <div class="custom-control custom-switch mb-2">
                <input class="custom-control-input" type="checkbox" id="user_menu_enabled" name="user_menu_enabled" formControlName="user_menu_enabled">
                <label class="custom-control-label" for="user_menu_enabled">User menu enabled</label>
            </div>
        </accordion-group>
        <accordion-group heading="Design footer" [isOpen]="false">
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="footer_background_color_picker">Footer background color (picker)</label>
                    <input class="form-control" type="color" id="footer_background_color_picker" [value]="form.value.footer_background_color" formControlName="footer_background_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="footer_background_color_input">Footer background color (value)</label>
                    <input type="text" class="form-control" id="footer_background_color_input" [value]="form.value.footer_background_color" formControlName="footer_background_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="footer_border_top_color_picker">Footer border top color (picker)</label>
                    <input class="form-control" type="color" id="footer_border_top_color_picker" [value]="form.value.footer_border_top_color" formControlName="footer_border_top_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="footer_border_top_color_input">Footer border top color (value)</label>
                    <input type="text" class="form-control" id="footer_border_top_color_input" [value]="form.value.footer_border_top_color" formControlName="footer_border_top_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="footer_text_color_picker">Footer text color (picker)</label>
                    <input class="form-control" type="color" id="footer_text_color_picker" [value]="form.value.footer_text_color" formControlName="footer_text_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="footer_text_color_input">Footer text color (value)</label>
                    <input type="text" class="form-control" id="footer_text_color_input" [value]="form.value.footer_text_color" formControlName="footer_text_color">
                </div>
            </div>
            <div class="form-group">
                <label for="footer_logos">Footer logos</label>
                <app-footer-logos-list
                    [form]="footerLogosFormArray"
                    [logoList]="getFooterLogoListByDisplay()">
                </app-footer-logos-list>
            </div>
        </accordion-group>
        <accordion-group heading="Design family" [isOpen]="false">
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="family_border_color_picker">Family border color (picker)</label>
                    <input class="form-control" type="color" id="family_border_color_picker" [value]="form.value.family_border_color" formControlName="family_border_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="family_border_color_input">Family border color (value)</label>
                    <input type="text" class="form-control" id="family_border_color_input" [value]="form.value.family_border_color" formControlName="family_border_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="family_header_background_color_picker">Family header background color (picker)</label>
                    <input class="form-control" type="color" id="family_header_background_color_picker" [value]="form.value.family_header_background_color" formControlName="family_header_background_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="family_header_background_color_input">Family header background color (value)</label>
                    <input type="text" class="form-control" id="family_header_background_color_input" [value]="form.value.family_header_background_color" formControlName="family_header_background_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="family_title_color_picker">Family title color (picker)</label>
                    <input class="form-control" type="color" id="family_title_color_picker" [value]="form.value.family_title_color" formControlName="family_title_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="family_title_color_input">Family title color (value)</label>
                    <input type="text" class="form-control" id="family_title_color_input" [value]="form.value.family_title_color" formControlName="family_title_color">
                </div>
            </div>
            <div class="custom-control custom-switch mb-2">
                <input class="custom-control-input" type="checkbox" id="family_title_bold" name="family_title_bold" formControlName="family_title_bold">
                <label class="custom-control-label" for="family_title_bold">Family title bold</label>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="family_background_color_picker">Family background color (picker)</label>
                    <input class="form-control" type="color" id="family_background_color_picker" [value]="form.value.family_background_color" formControlName="family_background_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="family_background_color_input">Family background color (value)</label>
                    <input type="text" class="form-control" id="family_background_color_input" [value]="form.value.family_background_color" formControlName="family_background_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="family_color_picker">Family color (picker)</label>
                    <input class="form-control" type="color" id="family_color_picker" [value]="form.value.family_color" formControlName="family_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="family_color_input">Family color (value)</label>
                    <input type="text" class="form-control" id="family_color_input" [value]="form.value.family_color" formControlName="family_color">
                </div>
            </div>
        </accordion-group>
        <accordion-group heading="Design progress bar" [isOpen]="false">
            <div class="form-group">
                <label for="progress_bar_title">Progress bar title</label>
                <input type="text" class="form-control" id="progress_bar_title" formControlName="progress_bar_title">
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="progress_bar_title_color_picker">Progress bar title color (picker)</label>
                    <input class="form-control" type="color" id="progress_bar_title_color_picker" [value]="form.value.progress_bar_title_color" formControlName="progress_bar_title_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="progress_bar_title_color_input">Progress bar title color (value)</label>
                    <input type="text" class="form-control" id="progress_bar_title_color_input" [value]="form.value.progress_bar_title_color" formControlName="progress_bar_title_color">
                </div>
            </div>
            <div class="form-group">
                <label for="progress_bar_subtitle">Progress bar subtitle</label>
                <input type="text" class="form-control" id="progress_bar_subtitle" formControlName="progress_bar_subtitle">
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="progress_bar_subtitle_color_picker">Progress bar subtitle color (picker)</label>
                    <input class="form-control" type="color" id="progress_bar_subtitle_color_picker" [value]="form.value.progress_bar_subtitle_color" formControlName="progress_bar_subtitle_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="progress_bar_subtitle_color_input">Progress bar title color (value)</label>
                    <input type="text" class="form-control" id="progress_bar_subtitle_color_input" [value]="form.value.progress_bar_subtitle_color" formControlName="progress_bar_subtitle_color">
                </div>
            </div>
            <div class="form-group">
                <label for="progress_bar_step_dataset_title">Progress bar step dataset title</label>
                <input type="text" class="form-control" id="progress_bar_step_dataset_title" formControlName="progress_bar_step_dataset_title">
            </div>
            <div class="form-group">
                <label for="progress_bar_step_criteria_title">Progress bar step criteria title</label>
                <input type="text" class="form-control" id="progress_bar_step_criteria_title" formControlName="progress_bar_step_criteria_title">
            </div>
            <div class="form-group">
                <label for="progress_bar_step_output_title">Progress bar step output title</label>
                <input type="text" class="form-control" id="progress_bar_step_output_title" formControlName="progress_bar_step_output_title">
            </div>
            <div class="form-group">
                <label for="progress_bar_step_result_title">Progress bar step result title</label>
                <input type="text" class="form-control" id="progress_bar_step_result_title" formControlName="progress_bar_step_result_title">
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="progress_bar_color_picker">Progress bar color (picker)</label>
                    <input class="form-control" type="color" id="progress_bar_color_picker" [value]="form.value.progress_bar_color" formControlName="progress_bar_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="progress_bar_color_input">Progress bar color (value)</label>
                    <input type="text" class="form-control" id="progress_bar_color_input" [value]="form.value.progress_bar_color" formControlName="progress_bar_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="progress_bar_active_color_picker">Progress bar active color (picker)</label>
                    <input class="form-control" type="color" id="progress_bar_active_color_picker" [value]="form.value.progress_bar_active_color" formControlName="progress_bar_active_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="progress_bar_active_color_input">Progress bar active color (value)</label>
                    <input type="text" class="form-control" id="progress_bar_active_color_input" [value]="form.value.progress_bar_active_color" formControlName="progress_bar_active_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="progress_bar_circle_color_picker">Progress bar circle color (picker)</label>
                    <input class="form-control" type="color" id="progress_bar_circle_color_picker" [value]="form.value.progress_bar_circle_color" formControlName="progress_bar_circle_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="progress_bar_circle_color_input">Progress bar cirlce color (value)</label>
                    <input type="text" class="form-control" id="progress_bar_circle_color_input" [value]="form.value.progress_bar_circle_color" formControlName="progress_bar_circle_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="progress_bar_circle_icon_color_picker">Progress bar icon circle color (picker)</label>
                    <input class="form-control" type="color" id="progress_bar_circle_icon_color_picker" [value]="form.value.progress_bar_circle_icon_color" formControlName="progress_bar_circle_icon_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="progress_bar_circle_icon_color_input">Progress bar icon cirlce color (value)</label>
                    <input type="text" class="form-control" id="progress_bar_circle_icon_color_input" [value]="form.value.progress_bar_circle_icon_color" formControlName="progress_bar_circle_icon_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="progress_bar_circle_icon_active_color_picker">Progress bar icon circle active color (picker)</label>
                    <input class="form-control" type="color" id="progress_bar_circle_icon_active_color_picker" [value]="form.value.progress_bar_circle_icon_active_color" formControlName="progress_bar_circle_icon_active_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="progress_bar_circle_icon_active_color_input">Progress bar icon cirlce active color (value)</label>
                    <input type="text" class="form-control" id="progress_bar_circle_icon_active_color" [value]="form.value.progress_bar_circle_icon_active_color" formControlName="progress_bar_circle_icon_active_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="progress_bar_text_color_picker">Progress bar text color (picker)</label>
                    <input class="form-control" type="color" id="progress_bar_text_color_picker" [value]="form.value.progress_bar_text_color" formControlName="progress_bar_text_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="progress_bar_text_color_input">Progress bar text color (value)</label>
                    <input type="text" class="form-control" id="progress_bar_text_color_input" [value]="form.value.progress_bar_text_color" formControlName="progress_bar_text_color">
                </div>
            </div>
        </accordion-group>
        <accordion-group heading="Design result header" [isOpen]="false">
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="result_header_background_color_picker">Result header background color (picker)</label>
                    <input class="form-control" type="color" id="result_header_background_color_picker" [value]="form.value.result_header_background_color" formControlName="result_header_background_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="result_header_background_color_input">Result header background color (value)</label>
                    <input type="text" class="form-control" id="result_header_background_color_input" [value]="form.value.result_header_background_color" formControlName="result_header_background_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="result_header_text_color_picker">Result header text color (picker)</label>
                    <input class="form-control" type="color" id="result_header_text_color_picker" [value]="form.value.result_header_text_color" formControlName="result_header_text_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="result_header_text_color_input">Result header text color (value)</label>
                    <input type="text" class="form-control" id="result_header_text_color_input" [value]="form.value.result_header_text_color" formControlName="result_header_text_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="result_header_btn_color_picker">Result header btn color (picker)</label>
                    <input class="form-control" type="color" id="result_header_btn_color_picker" [value]="form.value.result_header_btn_color" formControlName="result_header_btn_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="result_header_btn_color_input">Result header btn color (value)</label>
                    <input type="text" class="form-control" id="result_header_btn_color_input" [value]="form.value.result_header_btn_color" formControlName="result_header_btn_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="result_header_btn_hover_color_picker">Result header btn hover color (picker)</label>
                    <input class="form-control" type="color" id="result_header_btn_hover_color_picker" [value]="form.value.result_header_btn_hover_color" formControlName="result_header_btn_hover_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="result_header_btn_hover_color_input">Result header btn hover color (value)</label>
                    <input type="text" class="form-control" id="result_header_btn_hover_color_input" [value]="form.value.result_header_btn_hover_color" formControlName="result_header_btn_hover_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="result_header_btn_text_color_picker">Result header btn text color (picker)</label>
                    <input class="form-control" type="color" id="result_header_btn_text_color_picker" [value]="form.value.result_header_btn_text_color" formControlName="result_header_btn_text_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="result_header_btn_text_color_input">Result header btn text color (value)</label>
                    <input type="text" class="form-control" id="result_header_btn_text_color_input" [value]="form.value.result_header_btn_text_color" formControlName="result_header_btn_text_color">
                </div>
            </div>
        </accordion-group>
        <accordion-group heading="Design result datatable" [isOpen]="false">
            <div class="custom-control custom-switch mb-2">
                <input class="custom-control-input" type="checkbox" id="result_datatable_bordered" name="result_datatable_bordered" formControlName="result_datatable_bordered">
                <label class="custom-control-label" for="result_datatable_bordered">Result datatable bordered</label>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="result_datatable_border_color_picker">Result datatable border color (picker)</label>
                    <input class="form-control" type="color" id="result_datatable_border_color_picker" [value]="form.value.result_datatable_border_color" formControlName="result_datatable_border_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="result_datatable_border_color_input">Result datatable border color color (value)</label>
                    <input type="text" class="form-control" id="result_datatable_border_color_input" [value]="form.value.result_datatable_border_color" formControlName="result_datatable_border_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="result_datatable_header_background_color_picker">Result datatable header background color (picker)</label>
                    <input class="form-control" type="color" id="result_datatable_header_background_color_picker" [value]="form.value.result_datatable_header_background_color" formControlName="result_datatable_header_background_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="result_datatable_header_background_color_input">Result datatable header background color (value)</label>
                    <input type="text" class="form-control" id="result_datatable_header_background_color_input" [value]="form.value.result_datatable_header_background_color" formControlName="result_datatable_header_background_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="result_datatable_header_text_color_picker">Result datatable header text color (picker)</label>
                    <input class="form-control" type="color" id="result_datatable_header_text_color_picker" [value]="form.value.result_datatable_header_text_color" formControlName="result_datatable_header_text_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="result_datatable_header_text_color_input">Result datatable header text color (value)</label>
                    <input type="text" class="form-control" id="result_datatable_header_text_color_input" [value]="form.value.result_datatable_header_text_color" formControlName="result_datatable_header_text_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="result_datatable_rows_background_color_picker">Result datatable rows background color (picker)</label>
                    <input class="form-control" type="color" id="result_datatable_rows_background_color_picker" [value]="form.value.result_datatable_rows_background_color" formControlName="result_datatable_rows_background_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="result_datatable_rows_background_color_input">Result datatable rows background color (value)</label>
                    <input type="text" class="form-control" id="result_datatable_rows_background_color_input" [value]="form.value.result_datatable_rows_background_color" formControlName="result_datatable_rows_background_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="result_datatable_rows_text_color_picker">Result datatable rows text color (picker)</label>
                    <input class="form-control" type="color" id="result_datatable_rows_text_color_picker" [value]="form.value.result_datatable_rows_text_color" formControlName="result_datatable_rows_text_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="result_datatable_rows_text_color_input">Result datatable rows text color (value)</label>
                    <input type="text" class="form-control" id="result_datatable_rows_text_color_input" [value]="form.value.result_datatable_rows_text_color" formControlName="result_datatable_rows_text_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="result_datatable_sorted_color_picker">Result datatable sorted color (picker)</label>
                    <input class="form-control" type="color" id="result_datatable_sorted_color_picker" [value]="form.value.result_datatable_sorted_color" formControlName="result_datatable_sorted_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="result_datatable_sorted_color_input">Result datatable sorted color (value)</label>
                    <input type="text" class="form-control" id="result_datatable_sorted_color_input" [value]="form.value.result_datatable_sorted_color" formControlName="result_datatable_sorted_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="result_datatable_sorted_active_color_picker">Result datatable sorted active color (picker)</label>
                    <input class="form-control" type="color" id="result_datatable_sorted_active_color_picker" [value]="form.value.result_datatable_sorted_active_color" formControlName="result_datatable_sorted_active_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="result_datatable_sorted_active_color_input">Result datatable sorted active color (value)</label>
                    <input type="text" class="form-control" id="result_datatable_sorted_active_color_input" [value]="form.value.result_datatable_sorted_active_color" formControlName="result_datatable_sorted_active_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="result_datatable_link_color_picker">Result datatable link color (picker)</label>
                    <input class="form-control" type="color" id="result_datatable_link_color_picker" [value]="form.value.result_datatable_link_color" formControlName="result_datatable_link_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="result_datatable_link_color_input">Result datatable link color (value)</label>
                    <input type="text" class="form-control" id="result_datatable_link_color_input" [value]="form.value.result_datatable_link_color" formControlName="result_datatable_link_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="result_datatable_link_hover_color_picker">Result datatable link hover color (picker)</label>
                    <input class="form-control" type="color" id="result_datatable_link_hover_color_picker" [value]="form.value.result_datatable_link_hover_color" formControlName="result_datatable_link_hover_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="result_datatable_link_hover_color_input">Result datatable link hover color (value)</label>
                    <input type="text" class="form-control" id="result_datatable_link_hover_color_input" [value]="form.value.result_datatable_link_hover_color" formControlName="result_datatable_link_hover_color">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="result_datatable_rows_selected_color_picker">Result datatable rows selected color (picker)</label>
                    <input class="form-control" type="color" id="result_datatable_rows_selected_color_picker" [value]="form.value.result_datatable_rows_selected_color" formControlName="result_datatable_rows_selected_color">
                </div>
                <div class="form-group col-md-6">
                    <label for="result_datatable_rows_selected_color_input">Result datatable rows selected color (value)</label>
                    <input type="text" class="form-control" id="result_datatable_rows_selected_color_input" [value]="form.value.result_datatable_rows_selected_color" formControlName="result_datatable_rows_selected_color">
                </div>
            </div>
        </accordion-group>
        <accordion-group heading="Functionalities" [isOpen]="false">
            <div class="custom-control custom-switch mb-2">
                <input class="custom-control-input" type="checkbox" id="samp_enabled" name="samp_enabled" formControlName="samp_enabled">
                <label class="custom-control-label" for="samp_enabled">Samp enabled</label>
            </div>
            <div class="custom-control custom-switch mb-2">
                <input class="custom-control-input" type="checkbox" id="search_by_criteria_allowed" name="search_by_criteria_allowed" formControlName="search_by_criteria_allowed" (change)="checkDisableSearchByCriteriaAllowed()">
                <label class="custom-control-label" for="search_by_criteria_allowed">Classic search allowed</label>
            </div>
            <div class="form-group">
                <label for="search_by_criteria_label">Label</label>
                <input type="text" class="form-control" id="search_by_criteria_label" formControlName="search_by_criteria_label">
            </div>
            <div class="custom-control custom-switch mb-2">
                <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="form-group">
                <label for="search_multiple_label">Label</label>
                <input type="text" class="form-control" id="search_multiple_label" formControlName="search_multiple_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>
            <div class="custom-control custom-switch mb-2">
                <input class="custom-control-input" type="checkbox" id="documentation_allowed" name="documentation_allowed" formControlName="documentation_allowed" (change)="checkDisableDocumentationAllowed()">
                <label class="custom-control-label" for="documentation_allowed">Documentation allowed</label>
            </div>
            <div class="form-group">
                <label for="documentation_label">Label</label>
                <input type="text" class="form-control" id="documentation_label" formControlName="documentation_label">
            </div>
        </accordion-group>
    </accordion>
    <div class="form-group pt-4">
        <ng-content></ng-content>
    </div>
</form>