clipbucket/upload/styles/cbv3/layout/manage_playlists.html

<!-- Acount left -->
{include_template_file file="blocks/account-left.html"}

<div class="account-right">
    
    
    <!-- If mode is manage playlists -->
    {if $mode=='manage_playlist'}
    <div class="account-heading">
        <h2 >{lang code="Playlists"} (<span id="playlists_count">{$total_playlists}</span>)</h2>
        
        <div class="account-search absolute top right">
            <form class=" form-search">
                <input type="text" class="input-medium search-query">
                <button type="submit" class="btn">{lang code='Search'}</button>
            </form>
        </div>
    </div>
    
    <hr/>
    
    <div class="account-controls">
        <div class="account-controls-left playlist-list-controls">
            <span class="" style="margin-right: 8px"><input type="checkbox"/></span>
            <button class="btn btn-danger">{lang code='Delete Selected'}</button>
        </div>
        
        <div class="account-controls-right" align="right">
            <button class="btn btn-primary" data-toggle="modal" data-target="#create-playlist-modal">
                <i class="icon-plus icon-white"></i> {lang code='Create New'}</button>
        </div>
        
        <!-- Create Playlist Modal Box -->
        <div class="modal hide fade" id="create-playlist-modal">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">×</button>
                <h3>{lang code='Create new playlist'}</h3>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger hidden" id="create-playlist-error" ></div>
                
                <div id="create_playlist_body">
                    <form method="post" class="form-horizontal">
                        
                        <div class="control-group">
                            <label class="control-label" for="playlist_name">{lang code="Playlist Name"}</label>
                            <div class="controls">
                                <input type="text" class="input-xlarge" id="playlist_name" name="name" />
                                <span class="help-inline"></span>
                            </div>
                        </div>
                        
                        <div class="control-group">
                            <label class="control-label" for="description">{lang code="Description"}</label>
                            <div class="controls">
                                <textarea class="input-xlarge" id="description" name="description" ></textarea>
                                <span class="help-inline"></span>
                            </div>
                        </div>
                        
                        <div class="control-group">
                            <label class="control-label" for="description">{lang code="Tags"}</label>
                            <div class="controls">
                                <input type="text" class="input-xlarge" id="tags" name="tags" />
                                <p class="help-block">{lang code="Separate tags by comma, will be used for searching"}</p>
                                <span class="help-inline"></span>
                            </div>
                        </div>
                        
                        <div class="control-group">
                            <label class="control-label">{lang code="Privacy"}</label>
                            <div class="controls">
                                <label class="radio inline">
                                <input type="radio" name="privacy" id="privacy_pub" value="public" checked="checked">
                                {lang code="Public"}
                                </label>
                                <label class="radio inline">
                                <input type="radio" name="privacy" id="privacy_pri" value="private">
                                {lang code="Private"}
                                </label>
                                <p class="help-block">{lang code="Choose weather to make your playlist public or private"}</p>
                            </div>
                        </div>
                        
                        
                        <div class="control-group">
                            <label class="control-label">{lang code="Allow comments"}</label>
                            <div class="controls">
                                <label class="radio inline">
                                <input type="radio" name="allow_comments" id="comments_yes" value="yes" checked="checked">
                                {lang code="Yes"}
                                </label>
                                <label class="radio inline">
                                <input type="radio" name="allow_comments" id="comments_no" value="no">
                                {lang code="No"}
                                </label>
                            </div>
                        </div>
                        
                        
                        <div class="control-group">
                            <label class="control-label">{lang code="Allow ratings"}</label>
                            <div class="controls">
                                <label class="radio inline">
                                <input type="radio" name="allow_rating" id="rating_yes" value="yes" checked="checked">
                                {lang code="Yes"}
                                </label>
                                <label class="radio inline">
                                <input type="radio" name="allow_rating" id="rating_no" value="no">
                                {lang code="No"}
                                </label>
                            </div>
                        </div>
                        
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn" data-dismiss="modal">{lang code="Cancel"}</a>
                <a href="javascript:void(0)" onclick="create_playlist('v');" id="create_playlist_bttn"
                 class="btn btn-primary" data-loading-text="{lang code='Creating...'}" data-complete-text="finished!">{lang code="Create"}</a>
            </div>
        </div>
        
        
        <!-- Success Modal -->
        <div class="modal hide" id="myModal">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">×</button>
                <h3>New playlist has been created</h3>
            </div>
            <div class="modal-body">
                <p><div class="alert alert-info">Your new playlist has been created,
                you may now add items by clicking on 'view it'</div></p>
            </div>
            <div class="modal-footer">
                <a href="javascript:void(0)" class="btn"  data-dismiss="modal">Ok</a>
                <a href="#" class="btn btn-primary">View It</a>
            </div>
        </div>
        
        <div class="clearfix"></div>
    </div>
    
    <hr/>
    
    
    <div id="playlist-list">
        {if $playlists}
        {foreach $playlists as $playlist}
            {include_template_file file='blocks/playlist.html' playlist=$playlist}
        {/foreach}

        {else}
        <div class="no-playlist alert alert-info">{lang code="<strong>Hey there!</strong> You have not created any playlist, please create one now or read our playlist guide."}</div>
        {/if}
    </div>
    
    {/if}
    
    
    
    <!-- Have to edit playlist -->
    {if $mode=='edit_playlist'}
        <div class="account-heading">
            <h2>{lang code='Manage playlist'}</h2>
            
            <form method="post" class="form-horizontal">     
                <fieldset>
                
                <div class="control-group">
                    <label class="control-label" for="playlist_name">{lang code="Playlist Name"}</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" id="playlist_name" name="name" value="{$playlist.playlist_name}"/>
                        <span class="help-inline"></span>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="description">{lang code="Description"}</label>
                    <div class="controls">
                        <textarea class="input-xlarge" id="description" name="description" >{$playlist.description}</textarea>
                        <span class="help-inline"></span>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="description">{lang code="Tags"}</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" id="tags" name="tags" value="{$playlist.tags}" />
                        <p class="help-block">{lang code="Separate tags by comma, will be used for searching"}</p>
                        <span class="help-inline"></span>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label">{lang code="Privacy"}</label>
                    <div class="controls">
                        <label class="radio inline">
                        <input type="radio" name="privacy" id="privacy_pub" value="public" {if $playlist.privacy=='public'}checked="checked"{/if}>
                        {lang code="Public"}
                        </label>
                        <label class="radio inline">
                        <input type="radio" name="privacy" id="privacy_pri" value="private" {if $playlist.privacy=='private'}checked="checked"{/if}>
                        {lang code="Private"}
                        </label>
                        <p class="help-block">{lang code="Choose weather to make your playlist public or private"}</p>
                    </div>
                </div>


                <div class="control-group">
                    <label class="control-label">{lang code="Allow comments"}</label>
                    <div class="controls">
                        <label class="radio inline">
                        <input type="radio" name="allow_comments" id="comments_yes" value="yes"  {if $playlist.allow_comments=='yes'}checked="checked"{/if}>
                        {lang code="Yes"}
                        </label>
                        <label class="radio inline">
                        <input type="radio" name="allow_comments" id="comments_no" value="no"  {if $playlist.allow_comments=='no'}checked="checked"{/if}>
                        {lang code="No"}
                        </label>
                    </div>
                </div>


                <div class="control-group">
                    <label class="control-label">{lang code="Allow ratings"}</label>
                    <div class="controls">
                        <label class="radio inline">
                        <input type="radio" name="allow_rating" id="rating_yes" value="yes"  {if $playlist.allow_rating=='yes'}checked="checked"{/if}>
                        {lang code="Yes"}
                        </label>
                        <label class="radio inline">
                        <input type="radio" name="allow_rating" id="rating_no" value="no"  {if $playlist.allow_rating=='no'}checked="checked"{/if}>
                        {lang code="No"}
                        </label>
                    </div>
                </div>
            </fieldset>
                
            <div class="form-actions">
                <button type="submit" class="btn btn-primary" name="edit_playlist">Save playlist</button>
            </div>
                
                
            </form>
        </div> 
    <hr/>
    
    
    <h2>Playlist items</h2>
    {/if}
    
</div>



<!--Clearing things up -->
<div class="clearfix"></div>