//{ "one_file": false, "dir": "src/app/components/pages/{{ hyphen_name(table_name) }}-edit/", "filename": "{{ hyphen_name(table_name) }}-edit.component.html", "copy": {"ngedit.scss": "{{ hyphen_name(table_name) }}-edit.component.scss"} }
{% set char = table_name[0] %}{% set name = camelcase(table_name) -%}
<div *ngIf="{{ name }}" [ngClass]="{'dialog': dialogRef}">
    <div class="dialog-container" [ngClass]="{'center-content': isCreate }">
        <div class="edit-card" [ngClass]="{'col-lg-4': !dialogRef, 'col-12': dialogRef}">
             <mat-card>
                <mat-toolbar>
                    <h2>{{ '{{ !permissions.edit ? "View" : ' + name + 'ID ? "Edit" : "Create" }} ' + titlecase(table_name, " ") }}{{ '{{ isChanged && !isCreate ? "*" : ""}}'}}</h2>
                </mat-toolbar>
                <mat-card-content>
                    <mat-spinner *ngIf="isLoading"></mat-spinner>
                    <div [formGroup]="formGroup">{% for c in columns.values() %}{% if (c.name != 'id') %}{% set fk = find_fk(c.name, foreign_keys) %}{% if fk %}
                        <app-object-select class="object-select-form"
                                label="Select {{ titlecase(c.name[:-3]) }}"
                                objectType="{{ fk.target_table }}"
                                displayField="{{ guess_display_field(find_table(db.tables, fk.target_table)) }}"
                                [(value)]="{{ name }}.{{ fk.fk }}"
                                (valueChange)="formGroup.get('{{ fk.fk }}')?.setValue($event)">
                        </app-object-select>{% else %}
                        {% if is_bool(c.type) -%}
                        <div class="form-entry">
                            <mat-checkbox formControlName="{{ c.name }}">{{ titlecase(c.name, " ") }}</mat-checkbox>
                        </div>
                        {%- elif c.type.startswith('ENUM') -%}
                        <mat-form-field appearance="outline">
                            <mat-label>{{ titlecase(c.name, " ") }}</mat-label>
                            <mat-select formControlName="{{ c.name }}">
                                {% for v in get_enum_values(c.type) -%}
                                <mat-option value="{{ v }}">{{ titlecase(v.lower()) }}</mat-option>
                            {% endfor -%}
                            </mat-select>
                            <mat-error *ngIf="fieldErrors['{{ c.name }}']">{{ "{{ fieldErrors['" + c.name + "'] }}" }}</mat-error>
                        </mat-form-field>
                        {%- elif c.type == 'DATE' -%}
                        <mat-form-field appearance="outline">
                            <mat-label>{{ titlecase(c.name, " ") }}</mat-label>
                            <input matInput [matDatepicker]="{{ camelcase(c.name) }}Picker" formControlName="{{ c.name }}">
                            <mat-error *ngIf="fieldErrors['{{ c.name }}']">{{ "{{ fieldErrors['" + c.name + "'] }}" }}</mat-error>
                            <mat-datepicker-toggle matIconSuffix [for]="{{ camelcase(c.name) }}Picker"></mat-datepicker-toggle>
                            <mat-datepicker #{{ camelcase(c.name) }}Picker></mat-datepicker>
                        </mat-form-field>
                        {%- else -%}
                        <mat-form-field appearance="outline">
                            <mat-label>{{ titlecase(c.name, " ") }}</mat-label>
                            <input matInput formControlName="{{ c.name }}">
                            <mat-error *ngIf="fieldErrors['{{ c.name }}']">{{ "{{ fieldErrors['" + c.name + "'] }}" }}</mat-error>
                        </mat-form-field>
                        {%- endif -%}
                        {% endif %}{% endif %}{% endfor %}
                    </div>
                    <div *ngIf="error" class="error_saving">{{ "{{ error }}" }}</div>
                    <div class="btn-row">
                        <button mat-stroked-button (click)="cancel()">Cancel</button>
                        <button *ngIf="!isCreate" mat-flat-button color="warn" (click)="delete($event)">Delete</button>
                        <button *ngIf="permissions.edit" [disabled]="!validate() || !isChanged" mat-flat-button color="primary"
                                (click)="save()">{{ '{{ ' + name + 'ID ? "Save" : "Create" }} ' + titlecase(table_name, " ") }}</button>
                    </div>
                </mat-card-content>
             </mat-card>
        </div>
         <div *ngIf="!dialogRef && !isCreate" class="detail-card">
            <mat-card>
                <mat-card-content>
                    <mat-toolbar class="mat-tab-toolbar">{{ name }} Content</mat-toolbar>
                    Placeholder for detailed content
                </mat-card-content>
            </mat-card>
        </div>
    </div>
</div>