<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">
            {{#select size}}
            <option value="40px">{{localize "dynamic-soundscapes.block-config.size-tiny"}}</option>
            <option value="50px">{{localize "dynamic-soundscapes.block-config.size-small"}}</option>
            <option value="60px">{{localize "dynamic-soundscapes.block-config.size-medium"}}</option>
            <option value="70px">{{localize "dynamic-soundscapes.block-config.size-large"}}</option>
            <option value="90px">{{localize "dynamic-soundscapes.block-config.size-huge"}}</option>
            {{/select}}
        </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">
            {{#select conditionMode}}
            <option value="all">{{localize "dynamic-soundscapes.block-config.conditionMode-all"}}</option>
            <option value="any">{{localize "dynamic-soundscapes.block-config.conditionMode-any"}}</option>
            <option value="none">{{localize "dynamic-soundscapes.block-config.conditionMode-none"}}</option>
            {{/select}}
        </select>
    </div>

    <div class="form-group">
        <label>{{localize "dynamic-soundscapes.block-config.conditions"}}</label>
        <select id="condition-picker" name="">
            {{#select ""}}
            <option value="">{{localize "dynamic-soundscapes.block-config.conditions-none"}}</option>
            <option value="inCombat">{{localize "dynamic-soundscapes.block-config.conditions-inCombat"}}</option>
            <option value="notInCombat">{{localize "dynamic-soundscapes.block-config.conditions-notInCombat"}}</option>
            <option value="day">{{localize "dynamic-soundscapes.block-config.conditions-day"}}</option>
            <option value="night">{{localize "dynamic-soundscapes.block-config.conditions-night"}}</option>
            <option value="moodA">{{localize "dynamic-soundscapes.block-config.conditions-moodA"}}</option>
            <option value="moodB">{{localize "dynamic-soundscapes.block-config.conditions-moodB"}}</option>
            <option value="moodC">{{localize "dynamic-soundscapes.block-config.conditions-moodC"}}</option>
            {{#each weatherEffects}}
            <option value="{{@key}}">{{this}}</option>
            {{/each}}
            {{/select}}
        </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">
            {{#select mode}}
            <option value="soundboard">{{localize "dynamic-soundscapes.block-config.mode-soundboard"}}</option>
            <option value="ambient">{{localize "dynamic-soundscapes.block-config.mode-ambient"}}</option>
            <option value="random">{{localize "dynamic-soundscapes.block-config.mode-random"}}</option>
            {{/select}}
        </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>
        {{rangePicker name="variance" value=variance min=0 max=1 step=0.01}}
    </div>

    <footer>
        <button type="submit" class="btn btn-primary"><i class="far fa-save"></i> {{localize
            "dynamic-soundscapes.block-config.save"}}</button>
    </footer>
</form>