<div class="modal fade" id="media_manager">
    <div class="modal-dialog modal-fluid">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"><?php echo Lang::get('backend.media_chooser'); ?></h4>
            </div>
            <div class="modal-body">
                <div class="media-type-filter pull-right">
                    <button type="button" class="btn btn-default list-view-switch" data-toggle="button" autocomplete="off">
                        <span class="glyphicon glyphicon-th-list"></span>
                    </button>
                    <div class="search">
                        <div class="input-group">
                            <input type="text" class="search-field form-control" placeholder="Search">
                            <span class="icon glyphicon input-group-addon glyphicon-search"></span> 
                            
                        </div>
                    </div>
                    
                    <?php if(!empty($filters)): ?>
                    <select class="form-control" id="related-filter" name="related-filter" data-toggle="tooltip" data-placement="top" title="<?php echo Lang::get('backend.related_content'); ?>">
                        <option id="related-all" value=""><?php echo Lang::get('backend.all'); ?></option>
                        <?php foreach($filters as $filter): ?>
                            <option value="<?php echo $filter['value']; ?>"><?php echo $filter['label']; ?></option>
                        <?php endforeach; ?>
                    </select>
                    <?php endif; ?>
                    <button type="button" class="btn btn-default media-filter-btn filter-image-switch active" data-toggle="button" data-filter="image" aria-pressed="true" autocomplete="off">
                        <span class="glyphicon glyphicon-picture"></span>
                    </button>
                    <button type="button" class="btn btn-default media-filter-btn filter-video-switch active" data-toggle="button" data-filter="video" aria-pressed="true" autocomplete="off">
                        <span class="glyphicon glyphicon-facetime-video"></span>
                    </button>
                    <button type="button" class="btn btn-default media-filter-btn filter-document-switch active" data-toggle="button" data-filter="document" aria-pressed="true" autocomplete="off">
                        <span class="glyphicon glyphicon-file"></span>
                    </button>
                </div>
                <div role="tabpanel">
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#upload_media" aria-controls="upload_media" role="tab" data-toggle="tab"><?php echo Lang::get('backend.upload_media'); ?></a></li>
                        <li role="presentation"><a href="#media_library" aria-controls="media_library" role="tab" data-toggle="tab"><?php echo Lang::get('backend.media_library'); ?></a></li>
                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" class="drop-area tab-pane active " id="upload_media">
                            <div class="upload_control">
                                <h3 class="text-center"><?php echo Lang::get('backend.media_drag_drop'); ?></h3>
                                <button id="select_files" class="center-block btn btn-default btn-lg"><?php echo Lang::get('backend.select_files'); ?></button>
                                <input type="file" name="upload_media_input" id="upload_media_input" multiple=""/>
                            </div>
                            <div class="drop-here">
                                <h1>Drop File(s)</h1>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="media_library">
                            <div class="media-wrapper-scroll">
                                <div class="media-wrapper row">
                                </div>
                            </div> 
                            <div class="media-form">
                                <h3>Edit Media</h3>
                                <img src=""/>
                                <div class="media-info">
                                    <div class="info-label">url:</div>
                                    <div class="info-value url-holder"></div>
                                    <div class="info-label">original filename:</div>
                                    <div class="info-value filename-holder"></div>
                                    <div class="info-label">size:</div>
                                    <div class="info-value size-holder"></div>
                                </div>
                                <div class="clearfix"></div>
                                <div class="media-fields">   
                                    <div class="form-group">
                                        <label for="media-title-input" class="control-label">Title</label>
                                        <input id="media_title_input" class="form-control" maxlength="150" name="media_title_input" type="text">
                                    </div>
                                    <div class="form-group">
                                        <label for="media-alt-input" class="control-label">Alt</label>
                                        <input id="media_alt_input" class="form-control" maxlength="150" name="media_alt_input" type="text">
                                    </div>
                                    <div class="form-group">
                                        <label for="media-author-input" class="control-label">Author</label>
                                        <input id="media_author_input" class="form-control" maxlength="150" name="media_author_input" type="text">
                                    </div>
                                    <input type="button" class="btn btn-default close-edit-media" value="Close">
                                    <input type="button" class="btn btn-default delete-edit-media" value="Delete">
                                    
                                    <input class="btn btn-primary pull-right save-edit-media" type="button" value="SAVE">
                                </div>
                                <div class="busy-overlay"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="pull-left selected-items">
                    <div class="selected-control">
                        <span>Selected:</span>
                        <a href="#" class="clear-selection">clear</a>
                    </div>
                    <div class="selected-wrapper">
                    </div>
                </div>
                <button type="button" class="btn btn-default" data-dismiss="modal"><?php echo Lang::get('backend.close'); ?></button>
                <button type="button" class="btn btn-primary done-select"><?php echo Lang::get('backend.done'); ?></button>
            </div>
        </div>
    </div>
</div>
<script>
    $(function() {
        var mediaManagerOptions = <?php echo json_encode(Config::get('backoffice/media')); ?>;
        
        window.mediaManager = new Eae.View.MediaManager({
            el : $('#media_manager'),
            options : mediaManagerOptions
        });
    });
</script>
