{% extends "cms/base_popup.html" %}

{% block page_class %}insert-media{% endblock page_class %}

{% block popup_header %}
<!--TODO: Uncomment tabs and fix issues with inserting Audio and Video
<ul data-tabs-container=".media-container" class="tabs tabs">
  <li><a class="button active" data-tabs-content="> .images" href="#">Images</a></li>
  <li><a class="button" data-tabs-content="> .video" href="#">Video</a></li>
  <li><a class="button" data-tabs-content="> .audio" href="#">Audio</a></li>
</ul>
-->
{% endblock popup_header %}

{% block content %}

<div class="media-container">

  <div class="images">
    <ul data-tabs-container=".image-container" class="tabs sub-tabs">
      {% if api_link %}
        <li><a class="divider active" data-tabs-content="> .embed-url" href="#">Embed URL</a></li>
        <li><a class="" data-tabs-content="> .library" href="#">Library</a></li>
      {% endif %}
    </ul>
    <div class="image-container">

      <div class="insert-image embed-url">
        <form>

          <p class="row">
            <label class="image-url full">URL:
              <input data-attribute="src" type="text" />
            </label>
          </p>

          <hr>

          <p class="row">
            <label class="full">Title:
              <input data-attribute="title" type="text" />
            </label>
          </p>

          <p class="row">
            <label class="full">Alt Text:
              <input data-attribute="alt" type="text" />
            </label>
          </p>

          <hr>

          <div class="row preview-container">Preview:
            <div class="image-preview"></div>
          </div>

          <p class="row">
            <label class="col inline">Width (px):
              <input data-attribute="width" type="text" name="width" class="image-size">
            </label>
            <label class="col inline">Height (px):
              <input data-attribute="height" type="text" name="height" class="image-size">
            </label>
          </p>

          <p class="row">
            <label class="inline">
              <input type="checkbox" name="constrain" class="constrain">
              Constrain Proportions
            </label>
          </p>

          <hr>

          <div class="button-group button-group--submit">
            <a class="button button--secondary close-popup" href="#">Cancel</a>
            <input type="submit" class="button button--primary" name="insert" value="Insert" />
          </div>

        </form>
      </div>
      {% if api_link %}
      <div class="insert-image library" style="display: none;">
        <form>
            <div class="asset" data-api="{{ api_link }}&ftype=image">
              <div class="asset__preview" style="background-image:url({{ object.url }})"></div>
              <div class="asset__select">
                {{ hidden_input }}
                <input data-respond="true" data-attribute="src" type="hidden" value="">
				<div class="asset__buttons">
                <a class="button button--primary asset__add-link" target="_blank" href="{% url 'admin:assets_add' %}?popup=1&amp;type=image">
                  <i class="fa fa-plus-circle" aria-hidden="true"></i>
                  Upload New
              	</a>
          </div>
              </div>
            </div>

          <hr>

          <p class="row">
            <label class="full">Title:
              <input data-attribute="title" type="text" />
            </label>
          </p>

          <p class="row">
            <label class="full">Alt Text:
              <input data-attribute="alt" type="text" />
            </label>
          </p>

          <hr>

          <div class="preview-container">Preview:
            <div class="image-preview"></div>
          </div>

          <p class="row">
            <label class="col inline">Width (px):
              <input data-attribute="width" type="text" name="width" class="image-size">
            </label>
            <label class="col inline">Height (px):
              <input data-attribute="height" type="text" name="height" class="image-size">
            </label>
          </p>

          <p class="row">
            <label class="inline">
              <input type="checkbox" name="constrain" class="constrain">
              Constrain Proportions
            </label>
          </p>

          <hr>

          <div class="button-group button-group--submit">
            <a class="button button--secondary close-popup" href="#">Cancel</a>
            <input type="submit" class="button button--primary" name="insert" value="Insert" />
          </div>

        </form>
      </div>
      {% endif %}

    </div>

  </div>

  <div class="video" style="display: none;">

    <div class="video-container">
      <div class="insert-video">
        <form class="youtube">

          <label class="youtube-url full">Video URL:
            <input data-attribute="src" class="video-input" type="text" name="src">
          </label>

          <hr>

          <div class="preview-container">Preview:
            <div class="video-preview"></div>
          </div>

          <p class="row">
            <label class="col inline">Width (px):
              <input data-attribute="width" type="text" name="width">
            </label>
            <label class="col inline">Height (px):
              <input data-attribute="height" type="text" name="height">
            </label>
          </p>

          <label class="inline">
            <input type="checkbox" name="constrain" class="constrain">
            Constrain Proportions
          </label>

          <hr>

          <div class="button-group button-group--submit">
            <a class="button button--secondary close-popup" href="#">Cancel</a>
            <input type="submit" class="button button--primary" name="insert" value="Insert" />
          </div>

        </form>
      </div>
    </div>

  </div>

  <div class="audio" style="display: none;">

    <div class="audio-container">

      {% if api_link %}
      <div class="insert-audio">
        <form>

          <div class="asset" data-api="{{ api_link }}&ftype=audio" data-title="{{ object.user_filename }}" data-tags="{{ asset_tags }}">
            <div class="asset__preview" style="background-image:url({{ object.url }})"></div>

              <div class="asset__actions">
                  <div class="asset__select">
                      <input data-respond="true" data-attribute="src" type="hidden" value="">
                      {% if add_link %}
                        <a class="button button--primary asset__add-link" target="_blank" href="{{ add_link }}">
                          <i class="fa fa-plus-circle" aria-hidden="true"></i>
                          Upload New
                        </a>
                      {% endif %}
                  </div>
              </div>
          </div>

          <hr>

          <div class="preview-container">
            <div class="audio-preview">
              <audio controls>Your browser does not support the <code>audio</code> element.</audio>
            </div>
          </div>

          <hr>

          <div class="button-group button-group--submit">
            <a class="button button--secondary close-popup" href="#">Cancel</a>
            <input type="submit" class="button button--primary" name="insert" value="Insert" />
          </div>
        </form>
      </div>
      {% endif %}

    </div>

  </div>

</div>

{% endblock content %}
