<div class="spt-container">
    <div class="spt-headline d-flex justify-content-between align-items-start">
        <h2>{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.shipping_company' | translate }}</h2>
    </div>
    <div class="spt-form">
        <form [formGroup]="form" (ngSubmit)="onSubmit()">
            <div class="row">
                <div class="col-12 col-lg-6 mb-3">
                    <label for="name" class="form-label">{{ 'common.name' | translate }}*:</label>
                    <input type="text"
                           class="form-control"
                           id="name"
                           formControlName="name"
                           required/>
                </div>
                <div class="col-12 col-lg-6 mb-3">
                    <label for="code" class="form-label">{{ 'common.code' | translate }}*:</label>
                    <input type="text"
                           class="form-control"
                           id="code"
                           formControlName="code"
                           required/>
                </div>
            </div>
            <div class="row">
                <div class="col-12 mb-3">
                    <button type="submit" class="btn btn-primary" [disabled]="form.invalid">
                        {{ 'basic.save' | translate }}
                    </button>

                    @if (isEditMode()) {
                        <button type="button" class="ms-3 btn btn-primary" (click)="onDelete()">
                            {{ 'basic.delete' | translate }} {{ 'model.shipping_company' | translate }}
                        </button>
                    }
                </div>
            </div>
        </form>
    </div>
</div>