@model SceneEditViewModel

<form asp-controller="Scenes" asp-action="SaveSceneMetrics" method="post" class="scene-inspector-editor-form" data-scene-editor-form>
    @Html.AntiForgeryToken()
    <input type="hidden" asp-for="SceneID" />

    <div class="scene-inspector-editor-error" data-scene-editor-error hidden></div>

    <div class="scene-inspector-editor-fields">
        @if (!Model.Metrics.Any())
        {
            <p class="muted">No active scene metrics are configured.</p>
        }
        else
        {
            @for (var index = 0; index < Model.Metrics.Count; index++)
            {
                var metric = Model.Metrics[index];
                <section class="scene-inspector-editor-metric">
                    <input type="hidden" name="Metrics[@index].MetricTypeID" value="@metric.MetricTypeID" />
                    <div class="scene-inspector-editor-metric-heading">
                        <div>
                            <h4>@metric.MetricName</h4>
                            @if (!string.IsNullOrWhiteSpace(metric.Description))
                            {
                                <p>@metric.Description</p>
                            }
                        </div>
                        <output>@metric.Value</output>
                    </div>
                    <input type="range"
                           name="Metrics[@index].Value"
                           value="@metric.Value"
                           min="@metric.MinValue"
                           max="@metric.MaxValue"
                           class="form-range"
                           data-scene-metric-range />
                    <div class="scene-inspector-editor-range-labels">
                        <span>@metric.MinValue</span>
                        <span>@metric.MaxValue</span>
                    </div>
                    <div class="form-group">
                        <label for="metric-notes-@metric.MetricTypeID">Notes</label>
                        <textarea id="metric-notes-@metric.MetricTypeID" name="Metrics[@index].Notes" class="form-control" rows="3">@metric.Notes</textarea>
                    </div>
                </section>
            }
        }
    </div>

    <div class="scene-inspector-editor-footer">
        <button type="button" class="btn btn-sm btn-outline-secondary" data-scene-editor-close>Cancel</button>
        <button type="submit" class="btn btn-sm btn-primary" data-scene-editor-save>Save metrics</button>
    </div>
</form>