<form [formGroup]="form">
    <mat-form-field class="w-full">
        <mat-label for="title">{{
            'HOME.XTREAM_PLAYLIST.TITLE' | translate
        }}</mat-label>
        <input matInput type="text" id="title" formControlName="title" />
    </mat-form-field>
    <mat-form-field class="w-full" subscriptSizing="dynamic">
        <mat-label for="serverUrl">{{
            'HOME.XTREAM_PLAYLIST.SERVER_URL' | translate
        }}</mat-label>
        <input
            matInput
            type="text"
            id="serverUrl"
            formControlName="serverUrl"
            (input)="extractParams(form.value.serverUrl ?? '')"
        />
        <mat-hint>{{
            'HOME.XTREAM_PLAYLIST.URL_VALIDATION_ERROR' | translate
        }}</mat-hint>
        <mat-error>{{ 'SETTINGS.EPG_URL_ERROR' | translate }}</mat-error>
    </mat-form-field>
    <mat-form-field class="w-full">
        <mat-label for="username">{{
            'HOME.XTREAM_PLAYLIST.USERNAME' | translate
        }}</mat-label>
        <input matInput type="text" id="username" formControlName="username" />
    </mat-form-field>
    <mat-form-field class="w-full">
        <mat-label for="password">{{
            'HOME.XTREAM_PLAYLIST.PASSWORD' | translate
        }}</mat-label>
        <input matInput type="text" id="password" formControlName="password" />
    </mat-form-field>

    @if (connectionStatus) {
        <div class="connection-status">
            <mat-icon [class]="getStatusClass()">
                {{ getStatusIcon() }}
            </mat-icon>
            <span [class]="getStatusClass()">{{ getStatusMessage() }}</span>
        </div>
    }
</form>
