{{ define "lcd-arc" }}
{{ $arc := index .LCDProfiles 100 }}
{{ $lcdSensors := .LCDSensors }}
<div class="col-md-2">
    <div class="card system-card text-center">
        <div class="card-header">
            {{ $arc.Name }}
        </div>
        <div class="card-body">
            <div class="settings-list">
                <div class="settings-row">
                    <span class="settings-label text-ellipsis">{{ .Lang "txtSensor" }}</span>
                    <label>
                        <select id="sensorType_{{ $arc.Id }}" class="form-select system-select auto-width sensorType compact" name="userProfile">
                            {{ range $k, $v := $lcdSensors }}
                            {{ if eq $k $arc.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">{{ .Lang "txtMargin" }}</span>
                    <div class="system-input text-input max-width-100 compact">
                        <label>
                            <input type="text" id="margin_{{ $arc.Id }}" value="{{ $arc.Margin }}">
                        </label>
                    </div>
                </div>

                <div class="settings-row">
                    <span class="settings-label text-ellipsis">{{ .Lang "txtThickness" }}</span>
                    <div class="system-input text-input max-width-100 compact">
                        <label>
                            <input type="text" id="thickness_{{ $arc.Id }}" value="{{ $arc.Thickness }}">
                        </label>
                    </div>
                </div>

                <div class="settings-row">
                    <span class="settings-label text-ellipsis">{{ .Lang "txtBottomGap" }}</span>
                    <div class="system-input text-input max-width-100 compact">
                        <label>
                            <input type="text" id="gapRadians_{{ $arc.Id }}" value="{{ $arc.GapRadians }}">
                        </label>
                    </div>
                </div>

                <div class="settings-row">
                    <span class="settings-label text-ellipsis">{{ .Lang "txtBackground" }}</span>
                    <div class="system-color compact">
                        <label>
                            <input type="color" id="backgroundColor_{{ $arc.Id }}" value="{{ $arc.Background.Hex }}">
                        </label>
                    </div>
                </div>

                <div class="settings-row">
                    <span class="settings-label text-ellipsis">{{ .Lang "txtBorderColor" }}</span>
                    <div class="system-color compact">
                        <label>
                            <input type="color" id="borderColor_{{ $arc.Id }}" value="{{ $arc.BorderColor.Hex }}">
                        </label>
                    </div>
                </div>

                <div class="settings-row">
                    <span class="settings-label text-ellipsis">{{ .Lang "txtStartColor" }}</span>
                    <div class="system-color compact">
                        <label>
                            <input type="color" id="startColor_{{ $arc.Id }}" value="{{ $arc.StartColor.Hex }}">
                        </label>
                    </div>
                </div>

                <div class="settings-row">
                    <span class="settings-label text-ellipsis">{{ .Lang "txtEndColor" }}</span>
                    <div class="system-color compact">
                        <label>
                            <input type="color" id="endColor_{{ $arc.Id }}" value="{{ $arc.EndColor.Hex }}">
                        </label>
                    </div>
                </div>

                <div class="settings-row">
                    <span class="settings-label text-ellipsis">{{ .Lang "txtTextColor" }}</span>
                    <div class="system-color compact">
                        <label>
                            <input type="color" id="textColor_{{ $arc.Id }}" value="{{ $arc.TextColor.Hex }}">
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer card-footer-left">
            <button class="system-button saveArcProfile left"  data-info="{{ $arc.Id }}">{{ .Lang "txtSaveProfile" }}</button>
        </div>
    </div>
</div>
{{ end }}