<div ng:controller="VideoUploadController" class="row-fluid" id="body-main" qn:fillheight>
    <div class="col10">
        <div ng:show="view == 'upload'">
            <form name="myform">
                <div class="toolbar cfix">
                    <div class="toolbar-group">
                        <h3>
                            <span class="circle circle-small blue"><span class="icon ui-icon-image"></span></span>
                            {{$resource('videos.upload')}}
                        </h3>
                    </div>
                    <div class="toolbar-group">
                        <div class="col2"> {{$resource('videos.lib_name')}}</div> 
                        <div ng:show="addToExistig == true" class="toolbar-group">
                            <select ng:Model="libraryId" ng:options="library.ID as library.Title  for library in libraries" style="margin:0" ></select>
                            ili <button class="btn-link" ng:click="addToExistingLibrary()">{{$resource('videos.new_gallery')}}</button>
                        </div>
                        <div ng:show="addToExistig == false" class="toolbar-group">
                            <input ng:Model="libraryTitle" type="text" />
                            ili <button class="btn-link" ng:click="addToExistingLibrary()">{{$resource('videos.select_existing')}}</button>
                        </div>
                    </div>
                    <div class="toolbar-group right">
                        <button title="{{$resource('utility.done')}}" class="button lightblue tooltip" ng:click="done()"><i class="icon-ok"></i></button>
                    </div>
                    <div class="toolbar-group right">
                        <button title="{{$resource('utility.upload')}}" class="button lightblue tooltip" ng:click="startUpload()"><i class="icon-upload"></i></button>
                    </div>
                </div>
                <div>
                    <input name="libraryId" type="hidden" value="{{libraryId}}">
                    <input id="fileupload" type="file" name="file" data-url="/qusion/video/upload" multiple>
                </div>
            </form>
        </div>
        <div ng:show="view == 'youtube'">
            <div class="toolbar cfix">
                <div class="toolbar-group">
                    <h3><span class="circle circle-small blue"><span class="icon ui-icon-image"></span></span>{{$resource('videos.new_yt_video')}}</h3>
                </div>
                <div class="toolbar-group">
                    <div class="col2"> Gallery name</div> 
                    <div ng:show="addToExistig == true" class="toolbar-group">
                        <select ng:Model="libraryId" ng:options="library.ID as library.Title  for library in libraries" style="margin:0" ></select>
                        ili <button class="btn-link" ng:click="addToExistingLibrary()">{{$resource('videos.new_gallery')}}</button>
                    </div>
                    <div ng:show="addToExistig == false" class="toolbar-group">
                        <input ng:Model="libraryTitle" type="text" />
                        ili <button class="btn-link" ng:click="addToExistingLibrary()">{{$resource('videos.select_existing')}}</button>
                    </div>
                </div>
                <div class="toolbar-group right">
                    <button title="{{$resource('videos.save')}}" class="button tooltip" ng:click="saveYTVideos()"><i class="icon-ok"></i></button>
                </div>
            </div>
            <div><button ng:click="openYTSelector()">{{$resource('videos.new_yt_video')}}</button></div>
            <div class="q-upload fillh">
                <table>
                    <tbody>
                        <tr ng:repeat="video in videos">
                            <td class="file-name">{{video.Title}}</td>
                            <td class="file-size">{{video.Duration}}</td>
                            <td title="{{$resource('utility.delete')}}" class="file-remove tooltip" ng:click="removeYTVideo($index)"><i class="icon-remove"></i></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col2 sidebar">
        <div class="toolbar toolbar-strip  lightblue cfix">
            <div class="toolbar-group right">
                <h3>
                    &nbsp;
                </h3>
            </div>
        </div>
        <div class="inner fillh">
            <ul class="nav">
                <li ng:class="{active:view == 'upload'}"><a ng:click="changeView('upload')"><i class="icon-angle-right"></i>{{$resource('videos.upload')}}</a></li>
                <li ng:class="{active:view == 'youtube'}"><a ng:click="changeView('youtube')"><i class="icon-angle-right"></i>{{$resource('videos.from_yt')}}</a></li>
            </ul>
        </div>
    </div>
      <div qn:dialog="ui.ytSelector" style="padding: 0">
          <div class="toolbar cfix">
              <div class="toolbar-group">
                  <h3><span class="circle circle-small blue"><span class="icon ui-icon-image"></span></span>{{$resource('videos.new_yt_video')}}</h3>
              </div>
              <div class="toolbar-group">
                  <input type="text" class="ng-pristine" placeholder="Search YouTube" ng:Model="queryYT" />  <button title="{{$resource('utility.search')}}" class="button lightblue tooltip" ng:click="searchYouTube()"><i class="icon-search"></i></button>
              </div>
          </div>
          <div style="height: 400px; overflow: auto;">
              <ul  qn:selector=""  ng:model="searchedVideo" class="thumbnails">
                  <li ng:repeat="ytVideo in searchedVideo" class="ui-state-default" style="padding: 5px">
                      <div style="height: 100px; width: 180px; overflow: hidden">
                          <img width="180" ng:src="http://i2.ytimg.com/vi/{{ytVideo.FileName}}/default.jpg" alt="" />
                      </div>
                  </li>
              </ul>
          </div>
          <div style="margin-top: 15px">
            <button class="button lightblue" ng:click="doneSelection()"><i class="icon-ok"></i> {{$resource('videos.save')}}</button> or <button class="button" ng:click="cancelSeletion()">{{$resource('videos.cancel')}}</button>
        </div>
       
    </div>
</div>