<div id="slideshowEditorDialog" class="noSelect">
    
    <style type="text/css">
        /* Blockable Content*/
        #slideshowEditorDialog .interactiveContent {
            width:100%;
            height:100%;
        }

        #slideshowEditorDialog .interactiveContent > label {
            margin-top: 0px;
        }

        #slideshowEditorDialog .slideshowName {
            width:100%;
        }

        #slideshowEditorDialog .playlistManager {
            width: 658px;
            height: 252px;
        }

        #slideshowEditorDialog .playlistManager .contentContainer {
            border-radius: 5px;
            padding: 10px;
        }
        
        #slideshowEditorDialog .playlistManager .dashboardListTitle {
            width: 319px;
            float: left;
        }

        #slideshowEditorDialog .playlistManager .playlistTitle {
            float: left;
            margin-left: 20px;
        }

        #slideshowEditorDialog .playlistManager #dashboardSelection {
            width: 319px;
            height: 220px;
            float: left;
        }

        #slideshowEditorDialog .playlistManager #dashboardPlaylist {
            width: 319px;
            height: 220px;
            float: right;
        }

        #slideshowEditorDialog .playlistManager #dashboardPlaylist .playlistItems {
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
        }

        #slideshowEditorDialog .playlistManager #dashboardPlaylist .playlistRow {
            padding: 7px 0px 5px 10px;            
            width: 100%;
            height: 30px;
        }

        #slideshowEditorDialog .playlistManager #dashboardPlaylist .playlistRow .rowInfo {
            float: left;
            width: 180px;
            display: inline-block;
        }

        #slideshowEditorDialog .playlistManager #dashboardPlaylist .playlistRow .controls {
            float: left;
            width: 72px;
            height: 18px;
            display:none;
            float: right;
        }

        #slideshowEditorDialog .playlistManager #dashboardPlaylist .playlistRow .controls div {
            cursor: pointer;
            margin: 1px 5px 0px 0px;            
        }

        #slideshowEditorDialog .playlistManager #dashboardPlaylist .playlistRow .controls .plMoveUp,
        #slideshowEditorDialog .playlistManager #dashboardPlaylist .playlistRow .controls .plMoveDown {
            margin: 5px 5px 0px 5px;
            vertical-align: top;
        }

        #slideshowEditorDialog .playlistManager #dashboardPlaylist .playlistRow:hover > .controls {
            display: inline;
        }
        
        /*#slideshowEditorDialog .captionSettings {
            width: 319px;
            float: left;
        }*/

        #slideshowEditorDialog .transitionSettings {
            width: 319px;
            float: left;
        }

        #slideshowEditorDialog .transitionSettings select, #slideshowEditorDialog .captionSettings select{
            width:319px;
        }

        
    </style>
    
    <div class="separatorBar"></div>
    <div class="dialog-body">
        <div class="interactiveContent">
            <div class="headerTextSmall themeColor"><%loc General.Name %></div>
            <div class="clearGapHalf"></div>
            <input type="text" class="slideshowName" maxlength="255" />
            <div class="clearGap"></div>
            <div class="clearGap"></div>
            <div class="playlistManager">
                <div class="headerTextSmall themeColor dashboardListTitle"><%loc Dashboard.SlideshowEditor_DashboardsList_Title %></div>
                <div class="headerTextSmall themeColor playlistTitle"><%loc Dashboard.SlideshowEditor_Playlist_Title %></div>
                <div class="clear"></div>
                <div id="dashboardSelection" class="contentContainer"></div>

                <div id="dashboardPlaylist" class="contentContainer">
                    <div class="playlistItems"></div>
                </div>
            </div>

            <div class="clearGap"></div>

            <!--<div class="captionSettings">
                <label><%loc Dashboard.SlideshowEditor_CaptionMode_Title %></label>
                <div class="clearGapHalf"></div>
                <select class="captionMode">
                    <option value="1"><%loc Dashboard.SlideshowEditor_CaptionMode_None %></option>
                    <option value="2"><%loc Dashboard.SlideshowEditor_CaptionMode_SlideshowTitle %></option>
                    <option value="4"><%loc Dashboard.SlideshowEditor_CaptionMode_DashboardTitle %></option>
                </select>
            </div>-->

            <div class="transitionSettings">
                <div class="headerTextSmall themeColor"><%loc Dashboard.SlideshowEditor_TransitionTime %></div>
                <div class="clearGapHalf"></div>
                <select class="transitionTime">
                    <option value="5"><%loc Dashboard.SlideshowEditor_TransitionTime_5s %></option>
                    <option value="10"><%loc Dashboard.SlideshowEditor_TransitionTime_10s %></option>
                    <option value="15"><%loc Dashboard.SlideshowEditor_TransitionTime_15s %></option>
                    <option value="20"><%loc Dashboard.SlideshowEditor_TransitionTime_20s %></option>
                    <option value="30"><%loc Dashboard.SlideshowEditor_TransitionTime_30s %></option>
                    <option value="60"><%loc Dashboard.SlideshowEditor_TransitionTime_60s %></option>
                    <option value="120"><%loc Dashboard.SlideshowEditor_TransitionTime_120s %></option>
                    <option value="180"><%loc Dashboard.SlideshowEditor_TransitionTime_180s %></option>
                </select>
            </div>
        </div>
        <div class="controlButtonWrapper">
            <div class="validationMessage dialogValidationErrorMessage"></div>
            <div class="control-buttons floatSecondary">
                <span class="CancelLink"><%loc General.Cancel %></span>
                <input type="button" class="buttonOk dialog-button" value="<%loc General.OK %>" />
            </div>
        </div>
    </div>
</div>

<script type="text/template" class="playlistRowEntryTemplate">
    <div class="playlistRow customListItem">
        <div class="rowInfo ellipsis" title="<%- name %>"><%- position %>. <%- name %></div>
        <div class="controls">
            <div class="plDelete icon-16 icon-delete-16"></div>
            <div class="plMoveUp icon-9 icon-arrowup-9"></div>
            <div class="plMoveDown icon-9 icon-arrowdown-9"></div>            
        </div>
    </div>
</script>