<form action="submit">
    <h3 class="form-header"><i class="fa-duotone fa-palette"></i> {{localize "dynamic-soundscapes.block-config.aspect"}}</h3>
    
    <div class="form-group">
        <label>{{localize "dynamic-soundscapes.block-config.name"}}</label>
        <input type="text" class="form-control" name="title" value="{{title}}" />
    </div>

    <div class="form-group">
        <label>{{localize "dynamic-soundscapes.block-config.color"}}</label>
        <color-picker name="color" value={{color}} default=""/>
    </div>

    <div class="form-group">
        <label>{{localize "dynamic-soundscapes.block-config.size"}}</label>
        <select name="size">
            {{selectOptions SELECT_OPTIONS.size selected=size localize=true}}
        </select>
    </div>

    <h3 class="form-header"><i class="fa-duotone fa-code"></i> {{localize "dynamic-soundscapes.block-config.condition"}}</h3>

    <div class="form-group">
        <label>{{localize "dynamic-soundscapes.block-config.conditionMode"}}</label>
        <select name="conditionMode">
            {{selectOptions SELECT_OPTIONS.conditionMode selected=conditionMode localize=true}}
        </select>
    </div>

    <div class="form-group">
        <label>{{localize "dynamic-soundscapes.block-config.conditions"}}</label>
        <select id="condition-picker" name="">
        {{selectOptions SELECT_OPTIONS.conditionPicker selected="" localize=true}}
        </select>
    </div>

    <div class="soundscapes-conditions-container">
    {{#each conditions as |condition|}}
        <div class="soundscapes-condition" data-condition="{{condition.condition}}">
            <span>{{condition.name}}</span>
            <i class="fas fa-trash delete-condition"></i>
        </div>
    {{/each}}
    </div>

    <h3 class="form-header"><i class="fa-duotone fa-music"></i> {{localize "dynamic-soundscapes.block-config.sound"}}</h3>

    <div class="form-group">
        <label>{{localize "dynamic-soundscapes.block-config.mode"}}</label>
        <select name="mode">
            {{selectOptions SELECT_OPTIONS.mode selected=mode localize=true}}
        </select>
        <p class="notes"><strong>{{localize "dynamic-soundscapes.block-config.mode-soundboard"}}</strong>: {{localize "dynamic-soundscapes.block-config.mode-soundboard-info"}}</p>
        <p class="notes"><strong>{{localize "dynamic-soundscapes.block-config.mode-ambient"}}</strong>: {{localize "dynamic-soundscapes.block-config.mode-ambient-info"}}</p>
        <p class="notes"><strong>{{localize "dynamic-soundscapes.block-config.mode-random"}}</strong>: {{localize "dynamic-soundscapes.block-config.mode-random-info"}}</p>
    </div>

    <div class="form-group">
        <label>{{localize "dynamic-soundscapes.block-config.time"}}</label>
        <input type="number" min="0" step="1" name="time" value="{{time}}" />
        <p class="notes" id="time-text"></p>
    </div>

    <div class="form-group">
        <label>{{localize "dynamic-soundscapes.block-config.variance"}}</label>
        <range-picker name="variance" value={{variance}} min="0" max="1" step="0.01"></range-picker>
    </div>

    <footer>
        <button type="submit" class="btn btn-primary"><i class="far fa-save"></i> {{localize
            "dynamic-soundscapes.block-config.save"}}</button>
    </footer>
</form>