{# Scripts that need to be injected into the page actually being edited #}
{# (i.e. iframe or current page).                                       #}

{# PageElement editors #}
<link rel="stylesheet" href="/static/css/djaodjin-editor.css"/><!-- XXX djaodjin-editor -->
<!-- 'djaodjin-editor.js' requires `jQuery` and 'djresources.js'
     to be inserted in the page as well. -->
<script type="text/javascript" src="/static/vendor/dropzone.js"></script>
<script type="text/javascript" src="/static/js/djaodjin-upload.js"></script>
<script type="text/javascript" src="/static/js/djaodjin-editor.js"></script>

{# For the template code editors #}
<script type="text/javascript">
{% if templates %}
templateNames = {{templates|safe}};
{% endif %}

jQuery(document).ready(function($) {
    $('.editable').editor({
      baseUrl: '{{ urls.edit.api_page_element_base }}',
      hints: {{templates|safe}}
    });
  });
</script>

<!-- Media gallery panel -->
<div id="media-gallery" class="dj-gallery custom-gallery" style="display:none;">
  <div>
    <div>
      <h4>Media gallery</h4>
      <button type="button" class="dj-close" aria-label="Close">Close</button>
    </div>
    <hr>
    <div class="dj-gallery-items-container">
      <input placeholder="Search by tags..." class="dj-gallery-filter dj-input" type="text" />
      <div class="dj-gallery-items">
      </div>
      <div class="clickable-area">
        <em>Drag'n'drop or click here</em>
      </div>
      <div class="dj-gallery-upload-progress progress" style="display:none;">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
          <span class="progress-bar-info"></span>
        </div>
      </div>
      <div>
        <small class="dj-gallery-message"></small>
      </div>
    </div>
    <hr />
    <div class="dj-gallery-info-item">
      <div class="dj-gallery-info-item-empty">
        <em>Click on an item to view its metadata</em>
      </div>
      <div class="dj-gallery-info-item-selected" style="display: none;">
        <div class="input-group">
          <input class="dj-gallery-location-input form-control" type="text" readonly />
          <button class="dj-gallery-copy-location btn btn-secondary" type="button">
              <span>Copy</span>
          </button>
        </div>
        <div class="input-group mt-2">
          <input class="dj-gallery-tag-input form-control" type="text" placeholder="tags ..." />
        </div>
        <div class="dj-help-block">
          <small>Tags must be separated by a comma. ex: video, title</small>
        </div>
        <div class="d-grid gap-2">
          <button class="dj-gallery-preview-item btn btn-primary" type="button"
                  data-toggle="modal"
                  data-target="#modal-preview-media">
            Preview
          </button>
          <hr />
          <button class="dj-gallery-delete-item btn btn-danger">
            Delete
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="modal-preview-media" tabindex="-1" role="dialog"
       aria-labelledby="modal-preview-media">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4>Preview</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">Close</button>
        </div>
        <div class="dj-gallery-info-preview modal-body">
        </div>
        <div class="modal-footer">
          <div class="input-group">
            <input class="dj-gallery-location-input form-control" type="text" readonly />
            <button class="dj-gallery-copy-location btn btn-secondary" type="button">
              <span>Copy</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="/static/js/djaodjin-sidebar-gallery.js"></script>
  <script type="text/javascript">
jQuery(document).ready(function($) {
  $(".dj-gallery").djgallery({
    url: "{{urls.edit.api_medias}}?public=1",
    csrfToken: "{{csrf_token}}",
    {% if templates %}hints: {{templates|safe}},{% endif %}
    mediaPrefix: "{{media_prefix}}",
{% if access_key %}
    accessKey: "{{access_key}}",
    policy: "{{aws_policy}}",
    signature: "{{aws_policy_signature}}",
    securityToken: "{{security_token}}",
    amzCredential: "{{x_amz_credential}}",
    amzDate: "{{x_amz_date}}",
{% endif %}
    selectedMediaClass: "thumbnail-active",
  });
});
  </script>
</div>

<!-- Template editor panel -->
<div id="code-editor" class="custom-gallery" style="display:none;">
  <div>
    <h4>Template editor</h4>
    <button type="button" class="dj-close btn-close" aria-label="Close">Close</button>
  </div>
  <ul class="nav nav-tabs dashboard-tab" role="tablist">
      {# tabs inserted here #}
  </ul>
  <div class="tab-content" style="width:100%;min-height:100%;display:inline;">
      {# content panels inserted here #}
  </div>
  <script type="text/javascript" src="/static/vendor/jquery.ba-throttle-debounce.js"></script> {# djaodjin-code-editor.js:82 #}
  <script type="text/javascript" src="/static/js/djaodjin-code-editor.js"></script>
  <script type="text/javascript" src="/static/vendor/ace.js"></script>
  <script type="text/javascript" src="/static/vendor/ext-language_tools.js"></script>
  <script type="text/javascript" src="/static/vendor/ext-modelist.js"></script>
  <script type="text/javascript" src="/static/vendor/ext-emmet.js"></script>
  <script type="text/javascript">
  jQuery(document).ready(function($) {
      // templates editors
      $("#code-editor").templateCodeEditors({
          api_sources: "{{urls.edit.api_sources}}",
      });
  });
  </script>
</div>

<!-- style editor -->
<div id="style-editor" class="custom-gallery" style="width:800px;right:-800px;">
  <h2>Styles</h2>
  <button class="refresh-styles btn btn-primary">Reload</button>
  <form id="editable-styles-form" class="form-horizontal content">
  {% for section_name,section_attributes in editable_styles %}
  <hr>
  <h3>{{section_name}}</h3>
  {% for attribute in section_attributes %}
  <div class="row">
    <label for="style_attribute_{{section_name}}_{{loop.index}}"
           class="dj-style-label">{{attribute.property}}</label>
    <div class="dj-style-input-wrap">
        <input id="style_attribute_{{section_name}}_{{loop.index}}"
               name="{{attribute.property}}"
               type="text"
               class="dj-input"
               {% if attribute.editor %}
               data-dj-style-variable-editor="{{attribute.editor}}"
               {% else %}
               data-dj-style-variable-editor=""
               {% endif %}
               value="{{attribute.value}}" />
    </div>
    <div class="dj-style-button-wrap">
        <button class="btn btn-secondary style-reset-button"
                title="reset to default"
                data-target="style_attribute_{{section_name}}_{{loop.index}}"
                data-reset-value="{{attribute.default}}"
                type="button"><i class="fa fa-undo"></i></button>
    </div>
  </div>
  {% endfor %}
  {% endfor  %}
  </form>
  <script type="text/javascript" src="/static/vendor/bootstrap-colorpicker.js"></script>
  <script type="text/javascript" src="/static/js/djaodjin-style-editor.js"></script>
  <script type="text/javascript">
jQuery(document).ready(function($) {
  $("#style-editor").djstyles({
      api_less_overrides: "{{urls.edit.api_less_overrides}}",
      api_sitecss: "{{urls.edit.api_sitecss}}",
      iframe_view: $("iframe.edited-page").get(0)
  });
});
  </script>
</div>

<!-- Buttons to open/close the sliding edit panels -->
<div style="top:200px;position:fixed;right:-1px;z-index:10000" class="btn-group-vertical btn-group-sm btn-tools" role="group" aria-label="...">
  <button class="btn btn-primary" style="opacity:0.9;" id="toggle-media-gallery" data-target="#media-gallery" data-default-width="300" data-intro="Image gallery" data-position="left" title="Image Gallery"><i>G</i></button>
  <button id="toggle-code-editor" class="btn btn-primary" style="opacity:0.9;" data-target="#code-editor" data-default-width="800" data-intro="Code Editor" data-position="left" title="Code"><i>C</i></button>
  <button id="toggle-style-editor" class="btn btn-primary" style="opacity:0.9;" data-target="#style-editor" data-default-width="800" data-intro="Style Editor" data-position="left" title="Styles"><i>S</i></button>
  <script type="text/javascript" src="/static/js/djaodjin-panel-buttons.js"></script>
  <script type="text/javascript">
jQuery(document).ready(function($) {
    if( window.location !== window.top.location ) {
        $(".btn-tools").hide();
    } else {
        $(".btn-tools .btn").panelButton();
        $(".btn-tools .btn").click(function(){
            $(this).blur();
        });
    }
});
  </script>
</div>