<style>
  .webuploader-container {
    position: relative;
  }

  .webuploader-element-invisible {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
  }

  .webuploader-pick {
    position: relative;
    display: inline-block;
    cursor: pointer;
    background: #fff;
    padding: 5px 10px;
    color: #333;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #ccc;
    overflow: hidden;
  }

  .webuploader-pick-hover {
    background: #e6e6e6;
    border-color: #adadad;
  }

  .webuploader-pick-disable {
    opacity: 0.6;
    pointer-events: none;
  }

  .balloon-uploader {
    border: 1px solid #ddd;
    border-radius: 4px;
  }

  .balloon-uploader-heading {
    background-color: #f5f5f5;
    color: #333;
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    display: none;
  }

  .balloon-uploader-footer {
    background-color: #f5f5f5;
    color: #333;
    padding: 10px 15px;
    border-top: 1px solid #ddd;
    text-align: right;
  }

  .balloon-filelist {
    width: 100%;
  }

  .balloon-filelist-heading {
    padding: 8px 10px;
    font-weight: bold;
    border-bottom: 2px solid #ddd;
  }

  .balloon-uploader-body {
    position: relative;

  }

  .balloon-filelist .file-name,
  .balloon-filelist .file-size,
  .balloon-filelist .file-status,
  .balloon-filelist .file-manage {
    position: relative;
    z-index: 1;
  }

  .balloon-filelist .file-name {
    display: inline-block;
    width: 40%;
  }

  .balloon-filelist .file-size {
    display: inline-block;
    width: 20%;
  }

  .balloon-filelist .file-status {
    display: inline-block;
    width: 18%;
  }

  .balloon-filelist .file-manage {
    display: inline-block;
    width: 20%;
    z-index: 9999;
    position: absolute;
  }

  .balloon-filelist ul {
    list-style: none;
    margin: 0;
    padding: 0;
    min-height: 100px;
    max-height: 300px;
    overflow-y: scroll;
  }

  .balloon-filelist ul li {
    position: relative;
    border-bottom: 1px solid #ddd;
    padding: 8px 10px;
  }

  .balloon-dnd {
    visibility: hidden;
  }

  .balloon-uploader-none .balloon-uploader-footer,
  .balloon-uploader-none .balloon-uploader-body {
    visibility: hidden;
  }

  .balloon-uploader-none .balloon-dnd {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    vertical-align: middle;
  }

  .balloon-nofile {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    line-height: 100px;
    text-align: center;
    color: #999;
  }

  .balloon-uploader .file-pick-btn {
    display: inline-block;
  }

  .balloon-uploader .start-upload-btn {
    position: relative;
    display: inline-block;
    cursor: pointer;
    background: #5bc0de;
    padding: 5px 10px;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #46b8da;
    overflow: hidden;
  }

  .balloon-uploader .start-upload-btn:hover {
    background: #31b0d5;
    border-color: #269abc;
  }

  .balloon-filelist .file-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: -40px;
    bottom: 0;
  }

  .balloon-filelist .file-progress-bar {
    background: rgb(219, 242, 215);
    background: rgba(59, 181, 33, 0.18);
    float: left;
    height: 100%;
  }

</style>

{% set courseType = courseType|default('course') %}
{% set courseMaterialUrl = 'open_course_manage_material_browser' %}

{% set lesson = lesson|default(null) %}
<div id="media-choosers">

  <div class="file-chooser" id="video-chooser" style="display:none;"
       data-targetType="{{ targetType }}"
       data-targetId="{{ targetId }}"
  >
    <div class="file-chooser-bar" style="display:none;">
      <span data-role="placeholder"></span>
      <button class="btn btn-link btn-sm" type="button" data-role="trigger"><i
            class="glyphicon glyphicon-edit"></i> {{ '编辑'|trans }}</button>
      <div class="alert alert-warning" data-role="waiting-tip"
           style="display:none;">{{ '正在转换视频格式，转换需要一定的时间，期间将不能播放该视频。'|trans }}<br/>{{ '转换完成后将以站内消息通知您。'|trans }}</div>
    </div>

    <div class="file-chooser-main">
      <ul class="nav nav-pills nav-pills-sm mbs file-chooser-tabs">
        <li><a class="file-chooser-uploader-tab" href="#video-chooser-upload-pane"
               data-toggle="tab">{{ '上传视频'|trans }}</a></li>
        <li>
          <a href="#video-chooser-disk-pane" data-toggle="tab">
            {{ '从资料库中选择'|trans }}
          </a>
        </li>

        <li>
          <a href="#video-chooser-course-file" data-toggle="tab">
            {{ '从课程文件中选择'|trans }}
          </a>
        </li>

        <li {% if lesson and lesson.mediaSource != 'self' %}class="active"{% endif %}>
          <a href="#video-chooser-import-pane" data-toggle="tab">{{ '导入网络视频'|trans }}</a>
        </li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="video-chooser-upload-pane">

          <div class="file-chooser-uploader">
            {% include 'cloud-file/video-quality-switcher.html.twig' %}
            {% set token = uploader_token(targetType, targetId, 'private') %}
            <div class="balloon-uploader"
                 data-init-url="{{ path('uploader_init', {token:token}) }}"
                 data-finish-url="{{ path('uploader_finished', {token:token}) }}"
                 data-upload-auth-url="{{ path('uploader_auth', {token:token}) }}"
                {% if storageSetting.upload_mode == 'cloud' %}
                  data-accept="{{ uploader_accept(targetType, 'video')|json_encode }}"
                {% else %}
                  data-accept="{{ uploader_accept(targetType, 'local_video')|json_encode }}"
                {% endif %}
                 data-process="{{ uploader_process(targetType) }}"
            ></div>


            <div class="alert alert-info">
              <ul>
                {% if storageSetting.upload_mode == 'cloud' %}
                  <li>{{ '支持'|trans|raw }}<strong>mp4, avi, flv, wmv, mov,
                      m4v</strong>{{ '格式的视频文件上传，文件大小不能超过<strong>2 GB</strong>。'|trans|raw }}</li>
                  <li>{{ '支持'|trans|raw }}<strong>{{ '断点续传'|trans|raw }}</strong>{{ '（仅支持HTML5浏览器）。'|trans|raw }}</li>
                  <li>{{ '视频将上传到'|trans|raw }}
                    <strong>{{ '云视频服务器'|trans|raw }}</strong>{{ '，上传之后会对视频进行格式转换，转换过程需要一定的时间，在这个过程中视频将无法播放。'|trans|raw }}
                  </li>
                {% else %}
                  <li>{{ '支持'|trans }}<strong>mp4</strong>{{ '格式的视频文件上传，文件大小不能超过'|trans }}
                    <strong>{{ upload_max_filesize() }} </strong>{{ '。MP4文件的视频编码格式，请使用AVC(H264)编码，否则浏览器无法播放。'|trans }}
                  </li>
                  <li>
                    {{ '视频将上传到'|trans }}
                    <strong>{{ '网站服务器'|trans }}</strong>{{ '。如需使用%Edusoho%云视频,点击'|trans({'%Edusoho%':'EduSoho'|copyright_less}) }}
                    <a href="http://open.edusoho.com/show/cloud/video"
                       target="_blank">{{ '这里'|trans }}</a>{{ '了解详情,%Edusoho%云视频将为您提供稳定、安全、经济、便捷的视频托管服务以及优质的视频播放体验。'|trans({'%Edusoho%':'EduSoho'|copyright_less}) }}
                  </li>
                {% endif %}
              </ul>
            </div>

          </div>

        </div>
        <div class="tab-pane" id="video-chooser-disk-pane">
          <div id="file-browser-video" data-role="file-browser"
               data-base-url="{{ path('uploadfile_browser', {type:'video', source:'upload'}) }}"
               data-default-url="{{ path('uploadfile_browser', {type:'video', source:'upload'}) }}"
               data-my-sharing-contacts-url="{{ path('material_lib_my_sharing_contacts') }}"
               data-empty="{{ '暂无视频文件，请先上传。'|trans }}">
            <div class="file-browser-list-container"></div>
          </div>
        </div>

        <div class="tab-pane" id="video-chooser-course-file">
          <div id="file-browser-video" data-role="course-file-browser"
               data-url="{{ path(courseMaterialUrl, {courseId:targetId, type:'video', courseType:courseType}) }}"
               data-empty="{{ '暂无视频文件，请先上传。'|trans }}">
          </div>
        </div>

        <div class="tab-pane" id="video-chooser-import-pane">
          {% if lesson %}
            <div>原地址：{{ lesson.mediaUri }}</div>
          {% endif %}
          <div class="input-group">
            <input class="form-control" type="text" placeholder="{{ '支持优酷、腾讯、网易公开课的视频页面地址导入'|trans }}"
                   data-role="import-url">
            <span class="input-group-btn">
              <button type="button" class="btn btn-default" data-role="import"
                      data-url="{{ path('media_video_import', {courseId:course.id}) }}"
                      data-loading-text="{{ '正在导入，请稍等'|trans }}">{{ '导入'|trans }}</button>
            </span>
          </div>
          <strong class="color-danger">* {{ '腾讯和网易的视频不支持手机端播放'|trans }}</strong> 
        </div>
      </div>
    </div>

  </div>


  <div class="file-chooser" id="audio-chooser" style="display:none;"
       data-targetType="{{ targetType }}"
       data-targetId="{{ targetId }}"
  >
    <div class="file-chooser-bar" style="display:none;">
      <span data-role="placeholder"></span>
      <button class="btn btn-link btn-sm" type="button" data-role="trigger"><i
            class="glyphicon glyphicon-edit"></i> {{ '编辑'|trans }}</button>
    </div>

    <div class="file-chooser-main">
      <ul class="nav nav-pills nav-pills-sm mbs file-chooser-tabs">
        <li><a class="file-chooser-uploader-tab" href="#audio-chooser-upload-pane"
               data-toggle="tab">{{ '上传音频'|trans }}</a></li>
        <li><a href="#audio-chooser-disk-pane" data-toggle="tab">
            {{ '从资料库中选择'|trans }}
          </a></li>

        <li>
          <a href="#audio-chooser-course-file" data-toggle="tab">
            {{ '从课程文件中选择'|trans }}
          </a>
        </li>

      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="audio-chooser-upload-pane">

          <div class="file-chooser-uploader">
            {% set token = uploader_token(targetType, targetId, 'private') %}
            <div class="balloon-uploader"
                 data-init-url="{{ path('uploader_init', {token:token}) }}"
                 data-finish-url="{{ path('uploader_finished', {token:token}) }}"
                 data-upload-auth-url="{{ path('uploader_auth', {token:token}) }}"
                 data-accept="{{ uploader_accept(targetType, 'audio')|json_encode }}"
                 data-process="{{ uploader_process(targetType) }}"
            >
            </div>

            <div class="alert alert-info">
              <ul>
                <li>{{ '支持'|trans }}<strong>mp3</strong>{{ '格式的音频文件上传，且文件大小不能超过'|trans }}<strong>
                    {% if storageSetting.upload_mode == 'cloud' %}
                      500M
                    {% else %}
                      {{ upload_max_filesize() }}
                    {% endif %}
                  </strong>。
                </li>
                {% if storageSetting.upload_mode == 'cloud' %}
                  <li>{{ '支持'|trans }}<strong>{{ '断点续传'|trans }}</strong>{{ '（仅支持HTML5浏览器）。'|trans }}</li>
                  <li>{{ '音频将上传到'|trans }}<strong>{{ '云服务器'|trans }}</strong></li>
                {% else %}
                  <li>
                    {{ '音频将上传到'|trans }}
                    <strong>{{ '网站服务器'|trans }}</strong>{{ '，%Edusoho%点击'|trans({'%Edusoho%': '如需使用EduSoho云视频,'|copyright_less}) }}
                    <a href="http://open.edusoho.com/show/cloud/video"
                       target="_blank">{{ '这里'|trans }}</a>{{ '了解详情。'|trans }}
                  </li>
                {% endif %}
              </ul>
            </div>
          </div>

        </div>
        <div class="tab-pane" id="audio-chooser-disk-pane">
          <div id="file-browser-audio" data-role="file-browser"
               data-base-url="{{ path('uploadfile_browser', {type:'audio'}) }}"
               data-default-url="{{ path('uploadfile_browser', {type:'audio', source:'upload'}) }}"
               data-my-sharing-contacts-url="{{ path('material_lib_my_sharing_contacts') }}"
               data-empty="{{ '暂无音频文件，请先上传。'|trans }}">
            <div class="file-browser-list-container"></div>
          </div>
        </div>

        <div class="tab-pane" id="audio-chooser-course-file">
          <div id="file-browser-audio" data-role="course-file-browser"
               data-url="{{ path(courseMaterialUrl, {courseId:targetId, type:'audio', courseType:courseType}) }}"
               data-empty="{{ '暂无音频文件，请先上传。'|trans }}"></div>
        </div>

      </div>
    </div>

  </div>


  <div class="file-chooser" id="ppt-chooser" style="display:none;"
       data-params-url="{{ path('uploadfile_params', {storage:storageSetting.upload_mode, targetType:targetType, targetId:targetId, convertor:'ppt', lazyConvert:1}) }}"
       data-targetType="{{ targetType }}"
       data-targetId="{{ targetId }}"
  >
    <div class="file-chooser-bar" style="display:none;">
      <span data-role="placeholder"></span>
      <button class="btn btn-link btn-sm" type="button" data-role="trigger"><i
            class="glyphicon glyphicon-edit"></i> {{ '编辑'|trans }}</button>
    </div>

    <div class="file-chooser-main">
      <ul class="nav nav-pills nav-pills-sm mbs file-chooser-tabs">
        <li><a class="file-chooser-uploader-tab" href="#ppt-chooser-upload-pane" data-toggle="tab">上传PPT</a></li>
        <li><a href="#ppt-chooser-disk-pane" data-toggle="tab">
            {{ '从资料库中选择'|trans }}
          </a></li>

        <li>
          <a href="#ppt-chooser-course-file" data-toggle="tab">
            {{ '从课程文件中选择'|trans }}
          </a>
        </li>

      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="ppt-chooser-upload-pane">

          <div class="file-chooser-uploader">
            {% set token = uploader_token(targetType, targetId, 'private') %}
            <div class="balloon-uploader"
                 data-init-url="{{ path('uploader_init', {token:token}) }}"
                 data-finish-url="{{ path('uploader_finished', {token:token}) }}"
                 data-upload-auth-url="{{ path('uploader_auth', {token:token}) }}"
                 data-accept="{{ uploader_accept(targetType, 'ppt')|json_encode }}"
                 data-process="{{ uploader_process(targetType) }}"
            >
            </div>

            <div class="alert alert-info">
              <ul>
                <li>{{ '支持'|trans }}<strong>ppt, pptx</strong>{{ '格式的PPT文件上传，且文件大小不能超过'|trans }}<strong>100 MB</strong>。
                </li>
                <li>{{ 'PPT将上传到'|trans }}<strong>{{ '云服务器'|trans }}</strong></li>
              </ul>
            </div>
          </div>

        </div>
        <div class="tab-pane" id="ppt-chooser-disk-pane">
          <div id="file-browser-ppt" data-role="file-browser"
               data-base-url="{{ path('uploadfile_browser', {type:'ppt'}) }}"
               data-default-url="{{ path('uploadfile_browser', {type:'ppt', source:'upload'}) }}"
               data-my-sharing-contacts-url="{{ path('material_lib_my_sharing_contacts') }}"
               data-empty="{{ '暂无PPT文件，请先上传。'|trans }}">
            <div class="file-browser-list-container"></div>
          </div>
        </div>

        <div class="tab-pane" id="ppt-chooser-course-file">
          <div id="file-browser-ppt" data-role="course-file-browser"
               data-url="{{ path(courseMaterialUrl, {courseId:targetId, type:'ppt', courseType:courseType}) }}"
               data-empty="{{ '暂无PPT文件，请先上传。'|trans }}"></div>
        </div>

      </div>
    </div>

  </div>


  <div class="file-chooser" id="document-chooser" style="display:none;"
       data-params-url="{{ path('uploadfile_params', {storage:storageSetting.upload_mode, targetType:targetType, targetId:targetId, convertor:'document'}) }}"
       data-targetType="{{ targetType }}"
       data-targetId="{{ targetId }}"
  >
    <div class="file-chooser-bar" style="display:none;">
      <span data-role="placeholder"></span>
      <button class="btn btn-link btn-sm" type="button" data-role="trigger"><i
            class="glyphicon glyphicon-edit"></i> {{ '编辑'|trans }}</button>
    </div>

    <div class="file-chooser-main">
      <ul class="nav nav-pills nav-pills-sm mbs file-chooser-tabs">
        <li><a class="file-chooser-uploader-tab" href="#document-chooser-upload-pane"
               data-toggle="tab">{{ '上传文档'|trans }}</a></li>
        <li><a href="#document-chooser-disk-pane" data-toggle="tab">
            {{ '从资料库中选择'|trans }}
          </a></li>

        <li>
          <a href="#document-chooser-course-file" data-toggle="tab">
            {{ '从课程文件中选择'|trans }}
          </a>
        </li>

      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="document-chooser-upload-pane">

          <div class="file-chooser-uploader">

            {% set token = uploader_token(targetType, targetId, 'private') %}
            <div class="balloon-uploader"
                 data-init-url="{{ path('uploader_init', {token:token}) }}"
                 data-finish-url="{{ path('uploader_finished', {token:token}) }}"
                 data-upload-auth-url="{{ path('uploader_auth', {token:token}) }}"
                 data-accept="{{ uploader_accept(targetType, 'cloud_document')|json_encode }}"
                 data-process="{{ uploader_process(targetType) }}"></div>

            <div class="alert alert-info">
              <ul>
                <li>{{ '支持'|trans }}<strong>pdf,doc,docx,xls,xlsx</strong>{{ '格式的文档上传，且文件大小不能超过'|trans }}
                  <strong>{{ '100 MB'|trans }}</strong>。
                </li>
                <li>{{ '文档将上传到'|trans }}<strong>{{ '云服务器'|trans }}</strong></li>
              </ul>
            </div>
          </div>

        </div>
        <div class="tab-pane" id="document-chooser-disk-pane">
          <div id="file-browser-document" data-role="file-browser"
               data-base-url="{{ path('uploadfile_browser', {type:'document'}) }}"
               data-default-url="{{ path('uploadfile_browser', {type:'document', source:'upload'}) }}"
               data-my-sharing-contacts-url="{{ path('material_lib_my_sharing_contacts') }}"
               data-empty="{{ '暂无文档，请先上传。'|trans }}">
            <div class="file-browser-list-container"></div>
          </div>
        </div>

        <div class="tab-pane" id="document-chooser-course-file">
          <div id="file-browser-document" data-role="course-file-browser"
               data-url="{{ path(courseMaterialUrl, {courseId:targetId, type:'document', courseType:courseType}) }}"
               data-empty="{{ '暂无文档，请先上传。'|trans }}"></div>
        </div>

      </div>
    </div>

  </div>


  <div class="file-chooser" id="flash-chooser" style="display:none;"
       data-params-url="{{ path('uploadfile_params', {storage:storageSetting.upload_mode, targetType:targetType, targetId:targetId, convertor:''}) }}"
       data-targetType="{{ targetType }}"
       data-targetId="{{ targetId }}"
  >
    <div class="file-chooser-bar" style="display:none;">
      <span data-role="placeholder"></span>
      <button class="btn btn-link btn-sm" type="button" data-role="trigger"><i
            class="glyphicon glyphicon-edit"></i> {{ '编辑'|trans }}</button>
    </div>

    <div class="file-chooser-main">
      <ul class="nav nav-pills nav-pills-sm mbs file-chooser-tabs">
        <li><a class="file-chooser-uploader-tab" href="#flash-chooser-upload-pane"
               data-toggle="tab">{{ '上传Flash'|trans }}</a></li>
        <li><a href="#flash-chooser-disk-pane" data-toggle="tab">
            {{ '从资料库中选择'|trans }}
          </a></li>

        <li>
          <a href="#flash-chooser-course-file" data-toggle="tab">
            {{ '从课程文件中选择'|trans }}
          </a>
        </li>

      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="flash-chooser-upload-pane">

          <div class="file-chooser-uploader">
            {% set token = uploader_token(targetType, targetId, 'private') %}
            <div class="balloon-uploader"
                 data-init-url="{{ path('uploader_init', {token:token}) }}"
                 data-finish-url="{{ path('uploader_finished', {token:token}) }}"
                 data-upload-auth-url="{{ path('uploader_auth', {token:token}) }}"
                 data-accept="{{ uploader_accept(targetType, 'flash')|json_encode }}"
                 data-process="{{ uploader_process(targetType) }}"
            ></div>


            <div class="alert alert-info">
              <ul>
                <li>{{ '支持' }}<strong>{{ 'swf'|trans }}</strong>{{ '格式的文件上传，且文件大小不能超过'|trans }}
                  <strong>{{ '100 MB'|trans }}</strong>。
                </li>
                <li>{{ 'Flash将上传到'|trans }}<strong>{{ '云服务器'|trans }}</strong></li>
              </ul>
            </div>
          </div>

        </div>
        <div class="tab-pane" id="flash-chooser-disk-pane">
          <div id="file-browser-flash" data-role="file-browser"
               data-base-url="{{ path('uploadfile_browser', {type:'flash'}) }}"
               data-default-url="{{ path('uploadfile_browser', {type:'flash', source:'upload'}) }}"
               data-my-sharing-contacts-url="{{ path('material_lib_my_sharing_contacts') }}"
               data-empty="{{ '暂无Flash，请先上传。'|trans }}">
            <div class="file-browser-list-container"></div>
          </div>
        </div>

        <div class="tab-pane" id="flash-chooser-course-file">
          <div id="file-browser-flash" data-role="course-file-browser"
               data-url="{{ path(courseMaterialUrl, {courseId:targetId, type:'flash', courseType:courseType}) }}"
               data-empty="{{ '暂无Flash，请先上传。'|trans }}"></div>
        </div>

      </div>
    </div>

  </div>


</div>
