<h2 class="edit">Metrics</h2>

<% @record.config_metrics.each do |config_metric| %>
    <%= erb :command_config, locals: {command: config_metric.command_config.command_class, action: "#{url_prefix}admin/configs/#{@record.id}/metrics/#{config_metric.id}", command_options: config_metric.command_config.options} %>
<% end %>

<p id="add-command">
    Add metric:
    <select id="metric-select">
        <option></option>
        <% command_metrics.each do |metric| %>
            <option value="<%= metric.name %>"><%= metric.human_name %></option>
        <% end %>
    </select>
</p>

<% command_metrics.each do |metric| %>
    <%= erb :command_config, locals: {command: metric, action: "#{url_prefix}admin/configs/#{@record.id}/metrics"} %>
<% end %>

<script>
    $('#metric-select').change(function() {
        $('form.command.new').hide();
        $('form.command.new[data-command="' + $(this).val() + '"]').show();
    });

    $('form.command').submit(function(event) {
        // there are three possible submit buttons in a form: Delete, Update and Add
        var submitAction = $(this).find("input[type=submit]:focus").val();

        if (submitAction == 'Delete') {
            if (!confirm('Are you sure you want to delete this metric?'))
                event.preventDefault();
        }
    });
</script>