<h3 *ngIf="!isCreationMode">{{production.name}} bearbeiten</h3>
<h3 *ngIf="isCreationMode">Produzent anlegen</h3>
<form class="form" #productionDataForm="ngForm" (ngSubmit)="onFormSubmit(productionDataForm)">
    <div class="row row--full">
        <div class="column">
            <p class="error" *ngIf="errorMsg != ''">{{ errorMsg }}</p>
            <p class="error-msg" *ngIf="odeName.invalid && odeName.touched && odeName?.errors?.required">
                Name ist ein Pflichtfeld.
            </p>
            <p *ngIf="odeEmail.invalid && odeEmail.touched && odeEmail?.errors?.pattern" class="error-msg">
                Bitte gültige E-Mail Adresse eingeben.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="column column--checkbox">
            <p class="label">Aktivität</p>
            <input type="checkbox" id="odeActive" name="odeActive" [(ngModel)]="production.active" #odeActive="ngModel" />
            <label for="odeActive">Produzent ist aktiv</label>
        </div>
    </div>
    <div class="grid">
        <div class="grid-item">
            <div class="row">
                <div class="column">
                    <label for="odeName" [class.error]="odeName.touched && odeName?.errors?.required"><strong>Name*</strong></label>
                    <input type="text" id="odeName" name="odeName" [(ngModel)]="production.name" required #odeName="ngModel"
                           placeholder="Musterfirma" [class.error]="odeName.touched && odeName?.errors?.required" />
                </div>
                <div class="column">
                    <label for="odeAdditionalname">Zusatz</label>
                    <input type="text" id="odeAdditionalname" name="odeAdditionalname" [(ngModel)]="production.name_additional" #odeAdditionalname="ngModel"
                           placeholder="Die Muster-Agentur"/>
                </div>
            </div>
            <div class="row">
                <div class="column">
                    <label for="odeStreet">Straße</label>
                    <input type="text" id="odeStreet" name="odeStreet" [(ngModel)]="production.street"
                           placeholder="Musterstraße" #odeStreet="ngModel"/>
                </div>
                <div class="column">
                    <label for="odeStreetNo">Hausnummer</label>
                    <input type="text" id="odeStreetNo" name="odeStreetNo" [(ngModel)]="production.street_no"
                           placeholder="1a" #odeStreetNo="ngModel"/>
                </div>
            </div>
            <div class="row">
                <div class="column">
                    <label for="odeZip">PLZ</label>
                    <input type="text" id="odeZip" name="odeZip" [(ngModel)]="production.zip"
                           placeholder="12345" #odeZip="ngModel"/>
                </div>
                <div class="column">
                    <label for="odeCity">Ort</label>
                    <input type="text" id="odeCity" name="odeCity" [(ngModel)]="production.city"
                           placeholder="Musterstadt" #odeCity="ngModel"/>
                </div>
            </div>
            <div class="row">
                <div class="column">
                    <label for="odeCountry">Land</label>
                    <select id="odeCountry" name="odeCountry" [(ngModel)]="production.country_id" #odeCountry="ngModel">
                        <option [ngValue]=null>Land wählen</option>
                        <option *ngFor="let c of config.countries" value="{{ c.id }}">{{ c.name }}</option>
                    </select>
                </div>
                <div class="column"></div>
            </div>
            <div class="row">
                <div class="column">
                    <label for="odeUrl">Internetadresse</label>
                    <input type="text" id="odeUrl" name="odeUrl" [(ngModel)]="production.url" #odeUrl="ngModel"
                           placeholder="http://www.musterfirma.de"/>
                </div>
                <div class="column">
                    <label for="odeEmail" [class.error]="odeEmail.invalid && odeEmail.touched && odeEmail?.errors?.pattern">E-Mail</label>
                    <input type="email" id="odeEmail" name="odeEmail" [(ngModel)]="production.email" #odeEmail="ngModel"
                           [class.error]="odeEmail.invalid && odeEmail.touched && odeEmail?.errors?.pattern"
                           placeholder="b.mustermann@musterfirma.de" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" />
                </div>
            </div>
        </div>
        <div class="grid-item">
            <div class="row">
                <div class="column">
                    <label for="odeComment">Bemerkungen</label>
                    <textarea rows="5" cols="50" id="odeComment" name="odeComment" [(ngModel)]="production.comment" #odeComment="ngModel"></textarea>
                </div>
            </div>
            <div class="row">
                <div class="column">
                    <label for="odePhoneNo">Telefon</label>
                    <input type="text" id="odePhoneNo" name="odePhoneNo" [(ngModel)]="production.phone_no"
                           placeholder="040-1234567" #odePhoneNo="ngModel"/>
                </div>
                <div class="column">
                    <label for="odeMobileNo">Mobil</label>
                    <input type="text" id="odeMobileNo" name="odeMobileNo" [(ngModel)]="production.mobile_no"
                           placeholder="0177-1234567" #odeMobileNo="ngModel"/>
                </div>
            </div>
            <div class="row">
                <div class="column">
                    <label for="odeFaxNo">Fax</label>
                    <input type="text" id="odeFaxNo" name="odeFaxNo" [(ngModel)]="production.fax_no"
                           placeholder="040-1234568" #odeFaxNo="ngModel"/>
                </div>
                <div class="column"></div>
            </div>
        </div>
    </div>

    <div class="row row--full row--last">
        <div class="column">
            <button class="button" [disabled]="!productionDataForm.valid" title="Produzent speichern" *ngIf="!isCreationMode">speichern</button>
            <button class="button" [disabled]="!productionDataForm.valid" title="Produzent anlegen" *ngIf="isCreationMode">anlegen</button>
        </div>
    </div>
</form>
