{{ define "lcd-doublearc" }}
{{ $doubleArc := index .LCDProfiles 101 }}
{{ $lcdSensors := .LCDSensors }}
{{ $root := . }}
<div class="col-md-2">
    <div class="card system-card text-center">
        <div class="card-header">
            {{ $doubleArc.Name }}
        </div>
        <div class="card-body">
            <div class="settings-list">
                <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_{{ $doubleArc.Id }}" value="{{ $doubleArc.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_{{ $doubleArc.Id }}" value="{{ $doubleArc.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_{{ $doubleArc.Id }}" value="{{ $doubleArc.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_{{ $doubleArc.Id }}" value="{{ $doubleArc.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_{{ $doubleArc.Id }}" value="{{ $doubleArc.BorderColor.Hex }}">
                        </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_{{ $doubleArc.Id }}" value="{{ $doubleArc.SeparatorColor.Hex }}">
                        </label>
                    </div>
                </div>
            </div>
        </div>

        {{ range $key, $value := $doubleArc.Arcs }}
        <div class="card-body pt-0">
            {{ $value.Name }}
            <div class="settings-list">
                <div class="settings-row">
                    <span class="settings-label text-ellipsis">{{ $root.Lang "txtSensor" }}</span>
                    <label>
                        <select id="sensorType_{{ $key }}" 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 "txtStartColor" }}</span>
                    <div class="system-color compact">
                        <label>
                            <input type="color" id="startColor_{{ $key }}" value="{{ $value.StartColor.Hex }}">
                        </label>
                    </div>
                </div>
                <div class="settings-row">
                    <span class="settings-label text-ellipsis">{{ $root.Lang "txtEndColor" }}</span>
                    <div class="system-color compact">
                        <label>
                            <input type="color" id="endColor_{{ $key }}" value="{{ $value.EndColor.Hex }}">
                        </label>
                    </div>
                </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 }}" value="{{ $value.TextColor.Hex }}">
                        </label>
                    </div>
                </div>
            </div>
        </div>
        {{ end }}

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