{% trans_default_domain "admin" %}
{# TODO put this modal somewhere else? #}
<div class="js-youtube-modal modal fade" id="{{ id }}-modal" tabindex="-1" role="dialog" aria-labelledby="{{ id }}-label">
  <div class="modal-dialog" role="document">
    <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" id="{{ id }}-label">{{ 'youtube.upload.title'|trans }}</h4>
      </div>

      {#- sign in button -#}
      <div class="modal-body js-sign-in text-center">
        {#
        <span
          class="g-signin2"
          data-onsuccess="youtubeUploaderSigninCallback"
          data-scope="https://www.googleapis.com/auth/youtube.upload https://www.googleapis.com/auth/youtube">
        </span>
        TODO http://stackoverflow.com/questions/38751262/gapi-auth2-can-not-get-access-token
        #}
        <span
          class="g-signin"
          data-callback="youtubeUploaderSigninCallback"
          data-clientid="{{ googleClientID }}"
          data-cookiepolicy="single_host_origin"
          data-scope="https://www.googleapis.com/auth/youtube.upload https://www.googleapis.com/auth/youtube">
        </span>
      </div>

      {#- the upload form -#}
      <div class="modal-body js-upload-form hidden">
        <div class="row">
          <div class="col-xs-12">
            <img class="js-channel-thumbnail pull-right img-responsive">
            <p>{{ 'youtube.upload.channel'|trans }}</p>
            <h4 class="js-channel-name"></h4>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label" for="youtube-title">{{ 'youtube.upload.titleLabel'|trans }}</label>
          <input class="js-title-input form-control" id="youtube-title" type="text">
        </div>
        <div class="form-group">
          <label class="control-label" for="youtube-description">{{ 'youtube.upload.descriptionLabel'|trans }}</label>
          <textarea class="js-description-input form-control" id="youtube-description"></textarea>
        </div>
        <div class="form-group">
          <label class="control-label" for="youtube-privacy-status">{{ 'youtube.upload.privacyLabel'|trans }}</label>
          <select class="js-privacy-input form-control" id="youtube-privacy-status">
            <option>{{ 'youtube.upload.privacy.public'|trans }}</option>
            <option selected>{{ 'youtube.upload.privacy.unlisted'|trans }}</option>
            <option>{{ 'youtube.upload.privacy.private'|trans }}</option>
          </select>
        </div>

        <div class="form-group">
          <label class="control-label" for="youtube-file">{{ 'youtube.upload.fileLabel'|trans }}</label>
          <input class="js-file-input" type="file" id="youtube-file" class="form-control" accept="video/*">
        </div>
      </div>

      {#- upload progress -#}
      <div class="modal-body js-upload-progress hidden">
        <h4 class="control-label">
          {{ 'youtube.upload.uploading'|trans }}
          <small>
            <span class="js-percent-transferred">0</span>% done (<span class="js-bytes-transferred">?</span>/<span class="js-bytes-total">?</span> bytes)
          </small>
        </h4>
        <div class="progress progress-striped active mar-no">
          <div class="progress-bar" role="progressbar"></div>
        </div>
      </div>

      {#- upload completed -#}
      <div class="modal-body js-upload-complete hidden">
        <h4 class="control-label">{{ 'youtube.upload.uploadComplete'|trans }}</h4>
        <p class="js-video-id"></p>
        <ul class="js-post-upload-status"></ul>
      </div>

      {#- disclaimer -#}
      <div class="modal-body js-upload-disclaimer bord-top hidden">
        <p id="disclaimer">{{ 'youtube.upload.disclaimer'|trans|raw }}</p>
      </div>

      {#- buttons -#}
      <div class="modal-footer">
        <button type="button" class="btn btn-default js-upload-cancel" data-dismiss="modal">{{ 'youtube.upload.cancel'|trans }}</button>
        <button type="button" class="btn btn-primary js-upload-button hidden">{{ 'youtube.upload.upload'|trans }}</button>
        <button type="button" class="btn btn-primary js-confirm-button hidden" data-dismiss="modal">{{ 'youtube.upload.confirm'|trans }}</button>
      </div>
    </div>
  </div>
</div>