<form>
    <div class="relations-list">
        {{#each relations as |relation|}}
        <div class="relation-row" data-relation-id="{{relation.id}}">
            <fieldset>
                <legend>
                    <span>{{relation.label}}</span>
                    <button type="button" class="icon fa-solid fa-trash" data-tooltip="Delete Relation"
                        data-action="delete" data-id="{{relation.id}}"></button>
                </legend>

                <div class="form-group">
                    <label>ID</label>
                    <input type="text" name="id" value="{{relation.id}}"
                        placeholder="e.g. 'ally-of'" required>
                </div>

                <div class="form-group">
                    <label>Label</label>
                    <input type="text" name="label" value="{{relation.label}}" placeholder="e.g. 'Ally of'">
                </div>

                <div class="form-group slim">
                    <label>Color</label>
                    <input type="color" name="color" value="{{relation.color}}">
                </div>

                <div class="form-group slim">
                    <label>Style</label>
                    <select name="style">
                        {{#each ../styleOptions as |styleOpt|}}
                        <option value="{{styleOpt}}" {{#if (eq styleOpt relation.style)}}selected{{/if}}>
                            {{capitalize styleOpt}}
                        </option>
                        {{/each}}
                    </select>
                </div>

                <div class="form-group slim">
                    <label>Width</label>
                    <input type="number" name="strokeWidth" value="{{relation.strokeWidth}}" min="1" max="10" step="0.5">
                </div>

                <div class="form-group slim">
                    <label>No Arrow</label>
                    <input type="checkbox" name="noArrow" {{#if relation.noArrow}}checked{{/if}}>
                </div>

            </fieldset>
        </div>
        {{/each}}
    </div>
</form>