<form autocomplete="off" onsubmit="event.preventDefault()">
    <style>
        .boxed {
            border: 1px solid black ;
            border-radius: 5px ; 
            max-width: 166px;
            height: 300px;
        }
    </style>
    
    {{#each soundData}}
        <div class="form-group">
            {{#each this.dataThis}}
                <div class="boxed" style="padding: 5px; margin:2px">
                    <div style="text-align:center;">                    
                        {{localize "MaterialDeck.Sound"}} {{this.iteration}}
                    </div>
                    <div style="text-align:center;">                    
                        {{localize "MaterialDeck.Name"}}
                    </div>
                    <input type="text" name="namebox" value="{{this.name}}" id="name{{this.iteration}}" style="width:100%;" >

                    <div style="text-align:center;">                    
                        {{localize "MaterialDeck.Playlist"}}
                    </div>
                    <div>
                        <select name="playlist" class="playlist-select" default="" style="width:100%;" id="playlists{{this.iteration}}">
                            {{#select this.selectedPlaylist}}
                                {{#each playlists}}
                                <option value="{{this.id}}">{{this.name}}</option>
                                {{/each}}
                            {{/select}}
                        </select>
                    </div>

                    <div style="text-align:center;">                    
                        {{localize "MaterialDeck.Sound"}}
                    </div>
                    <div class="form-fields" style={{this.styleSS}}>
                        <select name="sounds" class="sounds-select" default="" style="width:100%;" id="soundSelect{{this.iteration}}">
                            {{#select this.sound}}
                                <option value="">{{localize "MaterialDeck.None"}}</option>
                                {{#each sounds}}
                                <option value="{{this._id}}">{{this.name}}</option>
                                {{/each}}
                            {{/select}}
                        </select>
                    </div>
                    <div class="form-fields" style={{this.styleFP}}>
                        <button type="button" class="file-picker" data-type="audio" data-target="src{{this.iteration}}" title="Browse Files" tabindex="-1">
                            <i class="fas fa-file-import fa-fw"></i>
                        </button>
                        <input class="image" type="text" name="src{{this.iteration}}" name2="soundSrc" id="srcPath{{this.iteration}}" placeholder="path/audio.mp3" value={{this.srcPath}}>
                    </div>
                    <div style="text-align:center;">                    
                        {{localize "MaterialDeck.Icon"}}
                    </div>
                    <div class="form-fields">
                        <button type="button" class="file-picker" data-type="image" data-target="img{{this.iteration}}" title="Browse Files" tabindex="-1">
                            <i class="fas fa-file-import fa-fw"></i>
                        </button>
                        <input class="image" type="text" name="img{{this.iteration}}" name2="imgSrc"  id="imgPath{{this.iteration}}" placeholder="path/image.png" value={{this.imgPath}}>
                    </div>
                    <div class="flex-container" style="display:flex;flex-direction:row;padding-top:5px">  
                        <label style="flex:1">{{localize "MaterialDeck.On"}}&nbsp;&nbsp;&nbsp;</label>
                        <input style="flex:1" type="color" id="colorOn{{this.iteration}}" name="colorOn" style="flex:4" data-dtype="String" value="{{this.colorOn}}">
                        <label style="flex:1">&nbsp;{{localize "MaterialDeck.Off"}}&nbsp;&nbsp;</label>
                        <input style="flex:1" type="color" id="colorOff{{this.iteration}}" name="colorOff" style="flex:4" data-dtype="String" value="{{this.colorOff}}"> 
                    </div>
                    
                    <div class="form-group options">
                        <label>{{localize "MaterialDeck.Playback"}}</label>
                        <select name="mode" id="playmode{{this.iteration}}" style="flex:1">
                            {{#select this.mode}}
                            <option value="0">{{localize "MaterialDeck.Once"}}</option>
                            <option value="1">{{localize "MaterialDeck.Repeat"}}</option>
                            <option value="2">{{localize "MaterialDeck.Hold"}}</option>
                            {{/select}}
                        </select>  
                    </div>
                    <div class="form-group options">
                    <label>{{localize "MaterialDeck.Volume"}}</label>
                        <input type="range" min="0" max="100" value={{this.volume}} class="slider" name="volume" id="volume{{this.iteration}}">
                    </div>

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