{{ define "lcd-animation" }}
{{ $animation := index .LCDProfiles 102 }}
{{ $lcdSensors := .LCDSensors }}
{{ $root := . }}
<div class="col-md-2">
    <div class="card system-card text-center">
        <div class="card-header">
            {{ $animation.Name }}
        </div>
        <div class="card-body">
            <div class="settings-list">
                <div class="settings-row">
                    <span class="settings-label text-ellipsis">{{ $root.Lang "txtBackground" }}</span>
                    <label>
                        <select id="backgroundImage_{{ $animation.Id }}" class="form-select system-select auto-width backgroundImage compact">
                            {{ range $k, $v := $animation.Images }}
                            {{ if eq $k $animation.Background }}
                            <option value="{{ $k }}" selected>{{ $k }}</option>
                            {{ else }}
                            <option value="{{ $k }}">{{ $k }}</option>
                            {{ end }}
                            {{ end }}
                        </select>
                    </label>
                </div>
                <div class="settings-row">
                    <span class="settings-label text-ellipsis">{{ .Lang "txtMargin" }}</span>
                    <div class="system-input text-input max-width-100 compact">
                        <label>
                            <input type="text" id="margin_{{ $animation.Id }}" value="{{ $animation.Margin }}">
                        </label>
                    </div>
                </div>
                <div class="settings-row">
                    <span class="settings-label text-ellipsis">
                        {{ .Lang "txtWorkers" }}
                        <i style="cursor: pointer;" class="bi bi-info-circle-fill svg-icon svg-icon-sm svg-icon-heavy lcdWorkersInfo"></i>
                    </span>
                    <div class="system-input text-input max-width-100 compact">
                        <label>
                            <input type="text" id="workers_{{ $animation.Id }}" value="{{ $animation.Workers }}">
                        </label>
                    </div>
                </div>
                <div class="settings-row">
                    <span class="settings-label text-ellipsis">
                        {{ .Lang "txtFrameDelay" }}
                        <i style="cursor: pointer;" class="bi bi-info-circle-fill svg-icon svg-icon-sm svg-icon-heavy lcdFrameDelayInfo"></i>
                    </span>
                    <div class="system-input text-input max-width-100 compact">
                        <label>
                            <input type="text" id="frameDelay_{{ $animation.Id }}" value="{{ $animation.FrameDelay }}">
                        </label>
                    </div>
                </div>
                <div class="settings-row">
                    <span class="settings-label text-ellipsis">{{ .Lang "txtSeparatorColor" }}</span>
                    <div class="system-color compact">
                        <label>
                            <input type="color" id="separatorColor_{{ $animation.Id }}" value="{{ $animation.SeparatorColor.Hex }}">
                        </label>
                    </div>
                </div>
            </div>
        </div>

        {{ range $key, $value := $animation.Sensors }}
        <div class="card-body pt-0">
            {{ $value.Name }}
            <div class="settings-list">
                <div class="settings-row">
                    <span class="settings-label text-ellipsis">{{ $root.Lang "txtEnable" }}</span>
                    <label class="system-toggle compact">
                        <input type="checkbox" id="sensorEnabled_{{ $key }}_{{ $animation.Id }}" {{ if $value.Enabled }}checked{{ end }}>
                        <span class="toggle-track"></span>
                    </label>
                </div>
                <div class="settings-row">
                    <span class="settings-label text-ellipsis">{{ $root.Lang "txtSensor" }}</span>
                    <label>
                        <select id="sensorType_{{ $key }}_{{ $animation.Id }}" class="form-select system-select auto-width sensorType compact">
                            {{ range $k, $v := $lcdSensors }}
                            {{ if eq $k $value.Sensor }}
                            <option value="{{ $k }}" selected>{{ $v }}</option>
                            {{ else }}
                            <option value="{{ $k }}">{{ $v }}</option>
                            {{ end }}
                            {{ end }}
                        </select>
                    </label>
                </div>
                <div class="settings-row">
                    <span class="settings-label text-ellipsis">{{ $root.Lang "txtTextColor" }}</span>
                    <div class="system-color compact">
                        <label>
                            <input type="color" id="textColor_{{ $key }}_{{ $animation.Id }}" value="{{ $value.TextColor.Hex }}">
                        </label>
                    </div>
                </div>
            </div>
        </div>
        {{ end }}

        <div class="card-footer card-footer-left">
            <button class="system-button saveAnimationProfile left" data-info="{{ $animation.Id }}">{{ .Lang "txtSaveProfile" }}</button>
        </div>
    </div>
</div>
{{ end }}