{{response.title=base_title + ': ' + T('embed editor')}}
{{response.files.append(URL('static', 'css/content_pages.css'))}}
{{extend 'uikit_layout.html'}}

{{block masthead}}
<div class="home-heading uk-text-center uk-padding-small">
    <h1>{{=T('Onezoom Embed widget editor')}}</h1>
    <p>{{=T('Configure a OneZoom embeddable widget for your website')}}</p>
</div>
{{end block}}

<form id="form_embed_edit" onsubmit="return false;">

  <div class="uk-grid-small uk-text-small uk-grid-divider" uk-grid>
    <div class="uk-child-width-2-3@m">
      <h3>{{=T('Configure OneZoom')}}</h3>

      <input type="hidden" name="_origin" value="" />

      <label><span class="uk-form-label">{{=T('Page variant')}}</span>
      <div class="uk-form-controls">
        <select name="_pathname" class="uk-select">
          <option value="/life/">{{=T('Default')}}</option>
          <option value="/life_noninteractive/">{{=T('Non-interactive view')}}</option>
        </select>
      </div>
      </label>

      <label for="input_url_search">{{=T('Search for your starting location')}}</label>
      <div class="search-nav" style="float: none"><div class="search-basic">
        <div class="searchbox uk-search uk-search-default">
          <div class="searchinput"><div class="icon-beside-input">
              <button   class="spinner" uk-spinner="ratio:0.5"></button>
              <button   class="main-icon" uk-icon="icon: search"></button>
            </div>
            <input id="input_url_search" class="uk-search-input" type="search" placeholder="{{=T('Search all life...')}}" />
            <input type="hidden" name="_pinpoint" value="" />
            <input type="hidden" name="otthome" value="" />
          </div>
          <div uk-dropdown="pos: bottom-left; offset: 0" class="search_dropdown selectable uk-overflow-auto">
            <div class="no_results">{{=T("No results found")}}</div>
            <dl class="search_hits"></dl>
          </div>
        </div>
      </div></div>

      <label for="input_url_search">{{=T('Highlight path to a species')}}</label>
      <div class="search-nav" style="float: none"><div class="search-basic">
        <div class="searchbox uk-search uk-search-default">
          <div class="searchinput"><div class="icon-beside-input">
              <button   class="spinner" uk-spinner="ratio:0.5"></button>
              <button   class="main-icon" uk-icon="icon: search"></button>
            </div>
            <input id="input_url_search" class="uk-search-input" type="search" placeholder="{{=T('Search all life...')}}" />
            <input type="hidden" name="highlight" value="" />
          </div>
          <div uk-dropdown="pos: bottom-left; offset: 0" class="search_dropdown selectable uk-overflow-auto">
            <div class="no_results">{{=T("No results found")}}</div>
            <dl class="search_hits"></dl>
          </div>
        </div>
        <br/>
      </div></div>
      <p>{{=XML(T('<button id="button_clear_highlight" class="uk-button oz-pill" disabled>Clear highlight</button>'))}}</p>

      <label><span class="uk-form-label">{{=T('Image sources')}}</span>
      <div class="uk-form-controls">
        <select name="img" class="uk-select">
          {{include 'settings_values/img.load'}}
        </select>
      </div>
      </label>

      <label><span class="uk-form-label">{{=T('Language')}}</span>
      <div class="uk-form-controls">
        <select name="lang" class="uk-select">
          {{include 'settings_values/lang.load'}}
        </select>
      </div>
      </label>

      <label><span class="uk-form-label">{{=T('Initial animation')}}</span>
      <div class="uk-form-controls">
        <select name="init" class="uk-select">
          <option value="leap" selected>{{=T('No animation')}}</option>
          <option value="pzoom">{{=T('Short zoom to species')}}</option>
          <option value="zoom">{{=T('Full zoom to species')}}</option>
          <option value="leap_into" selected>{{=T('No animation view of interior node')}}</option>
          <option value="pzoom_into">{{=T('Short zoom to interior node')}}</option>
          <option value="zoom_into">{{=T('Full zoom to interior node')}}</option>
        </select>
      </div>
      </label>

      <label><span class="uk-form-label">{{=T('Visualisation Shape')}}</span>
      <div class="uk-form-controls">
        <select name="vis" class="uk-select">
          {{include 'settings_values/vis.load'}}
        </select>
      </div>
      </label>

      <label><span class="uk-form-label">{{=T('Colour scheme')}}</span>
      <div class="uk-form-controls">
        <select name="cols" class="uk-select">
          <optgroup label="{{=T('Colour By')}}">
            {{include 'settings_values/cols.load'}}
          </optgroup>
          <optgroup label="{{=T('Colour blind friendly')}}">
            <option value="IUCN_CBF" selected>{{=XML(T('%(slot0)s (CBF)') % {'slot0': (xmlescape(T('Extinction risk')))})}}</option>
            <option value="popularity_CBF">{{=XML(T('%(slot0)s (CBF)') % {'slot0': (xmlescape(T('Species popularity')))})}}</option>
          </optgroup>
        </select>
      </div>
      </label>

    </div>
    <div class="uk-width-expand@m">
      <h3>{{=T('Preview')}}</h3>
      <iframe id="iframe_embed_preview" src="javascript:" style="border: 1px solid black; padding: 2px; width: 600px; height: 400px"></iframe>
    </div>
  </div>
</form>

<hr/>

<h3>{{=T('E-mail me the embed code')}}</h3>
<p>{{=T('We will store your e-mail address in our database and use it as a point of contact if we notice any problems with the OneZoom embedding.')}}</p>

{{=form}}

<script>
(function() {
    var form_embed_edit = document.getElementById('form_embed_edit'),
        iframe_embed_preview = document.getElementById('iframe_embed_preview');

    $('.search_dropdown', form_embed_edit)
        .click(function(event) {
            var searchbox = $(this.parentElement);
            var search_input = searchbox.find('.searchinput input[type=search]')
            var hidden_el = searchbox.find('input[type=hidden]')[0];
            var ddEl = event.target.closest('dd');
            var href = $(ddEl).find('a').attr('href');

            if (!href) return;  // Ignore non-links
            event.preventDefault();  // Don't follow links

            // Populate search input with current item, so it's more obvious what's selected
            search_input.val($(event.target).closest('dd').text());

            if (hidden_el.name === '_pinpoint') {
                hidden_el.value = href.replace(/^.*\//, '');
                form_embed_edit.elements['otthome'].value = href.replace(/^.*\=/, '');
            } else if (hidden_el.name === 'highlight') {
                hidden_el.value = 'path:' + href.replace(/^.*\//, '');
            } else {
                throw new Error("Unknown hidden element name" + hidden_el);
            }
            form_embed_edit.dispatchEvent(new Event('change'));
        });
    $('.searchinput input', form_embed_edit)
        .on('keydown', function(event) {
            // Stop UI-kit from nullifying space
            // https://github.com/uikit/uikit/blob/8313ce565be686952ab6edf8a7caee5fdfcca08c/src/js/core/toggle.js#L138-L151
            event.stopPropagation();
        })
        .on('keyup', function(event) {

            var search_input = $(this);
            var search_term = this.value;
            var searchbox = $(this).closest('.searchbox');
            var searchresult = $('.searchresult', searchbox);
            var dropdown = $('.search_dropdown', searchbox);
            if (search_term.length==0) {
                {{if is_testing:}}console.log("Hiding no_result section of dropdown");{{pass}}
                $('.no_results', dropdown).hide();
                $('.search_hits', dropdown).empty();
                OZui.search_manager.full_search(""); // this clears the search
                $('.searchinput', searchbox).removeClass('waiting_for_search_result');
            } else {
                var delay_ms = 1000;
                if (event.which == 13) {
                    delay_ms = 1;   //enter was pressed - don't delay
                }
            if ((search_term.replace(/ /g,'').length > 2)||((search_term.replace(/ /g,'').length > 1)&&(delay_ms == 1))) { // we're never going to search for a single character

            OZui.search_manager.full_search(
                search_term,
                function(original_string, actual_search, results) {
                    OZui.searchPopulate(searchbox, original_string, results);
                },
                delay_ms,
                function() {
                    {{if is_testing:}}console.log("Search for '" + search_term + "' sent to OneZoom API from advanced search");{{pass}}
                    if(!($(".searchinput").hasClass('waiting_for_search_result'))) {
                        $(".searchinput", searchbox).addClass('waiting_for_search_result'); // switch flag for search to on
                    }});
            }
            }
        });

    document.getElementById('button_clear_highlight').addEventListener('click', function (e) {
        e.preventDefault();
        form_embed_edit.elements['highlight'].value = "";
        // Search search input
        form_embed_edit.elements['highlight'].previousElementSibling.value = "";
        form_embed_edit.dispatchEvent(new Event('change'));
    });

    form_embed_edit.addEventListener('change', function (e) {
        // Turn form content back into URL
        var url =
                form_embed_edit.elements['_origin'].value +
                form_embed_edit.elements['_pathname'].value +
                form_embed_edit.elements['_pinpoint'].value + '?' + $(this).serializeArray().filter(function (x) {
            // Ignore _path, anything with empty value
            return x.name && x.name[0] !== '_' && x.value;
        }).map(function(x) {
            return encodeURIComponent(x.name) + "=" + encodeURIComponent(x.value);
        }).join("&");

        document.getElementById('button_clear_highlight').disabled = !(form_embed_edit.elements['highlight'].value);

        iframe_embed_preview.src = url;
        document.getElementById('form_embed_email').elements.url.value = url;
    });
}());

(function() {
    // On startup, bootstrap by populating preview fields from hidden form URL
    var form_embed_edit = document.getElementById('form_embed_edit'),
        loc = document.createElement('A'),
        m;

    // Use DOM to parse incoming URL
    loc.href = document.getElementById('form_embed_email').elements.url.value;

    $(form_embed_edit.elements['_origin']).val(loc.origin);
    m = loc.pathname.split(/(@.*)/);
    $(form_embed_edit.elements['_pathname']).val(m[0].replace(/\/?$/, '/'));
    $(form_embed_edit.elements['_pinpoint']).val(m[1] || '');
    loc.search.replace(/^\?/, '').split(/\&/).forEach(function(part) {
        var parts = part.split(/\=/);
        if (parts[0]) {
            $(form_embed_edit.elements[decodeURIComponent(parts[0])]).val(decodeURIComponent(parts[1]));
        }
    });

    form_embed_edit.dispatchEvent(new Event('change'));
}());
</script>