{% load widget_tweaks %}
{% load static %}

<div class="bookmarks-form">
  {% csrf_token %}
  {{ form.website_title }}
  {{ form.website_description }}
  {{ form.auto_close|attr:"type:hidden" }}
  <div class="form-group {% if form.url.errors %}has-error{% endif %}">
    <label for="{{ form.url.id_for_label }}" class="form-label">URL</label>
    {{ form.url|add_class:"form-input"|attr:"autofocus"|attr:"placeholder: " }}
    {% if form.url.errors %}
      <div class="form-input-hint">
        {{ form.url.errors }}
      </div>
    {% endif %}
    <div class="form-input-hint bookmark-exists">
      This URL is already bookmarked.
      The form has been pre-filled with the existing bookmark, and saving the form will update the existing bookmark.
    </div>
  </div>
  <div class="form-group">
    <label for="{{ form.tag_string.id_for_label }}" class="form-label">Tags</label>
    {{ form.tag_string|add_class:"form-input"|attr:"ld-tag-autocomplete"|attr:"autocomplete:off"|attr:"autocapitalize:off" }}
    <div class="form-input-hint">
      Enter any number of tags separated by space and <strong>without</strong> the hash (#). If a tag does not
      exist it will be
      automatically created.
    </div>
    {{ form.tag_string.errors }}
  </div>
  <div class="form-group has-icon-right">
    <label for="{{ form.title.id_for_label }}" class="form-label">Title</label>
    <div class="has-icon-right">
      {{ form.title|add_class:"form-input"|attr:"autocomplete:off" }}
      <i class="form-icon loading"></i>
      <a class="btn btn-link form-icon" title="Edit title from website">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
          <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"/>
          <path fill-rule="evenodd"
                d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
                clip-rule="evenodd"/>
        </svg>
      </a>
    </div>
    <div class="form-input-hint">
      Optional, leave empty to use title from website.
    </div>
    {{ form.title.errors }}
  </div>
  <div class="form-group">
    <label for="{{ form.description.id_for_label }}" class="form-label">Description</label>
    <div class="has-icon-right">
      {{ form.description|add_class:"form-input"|attr:"rows:2" }}
      <i class="form-icon loading"></i>
      <a class="btn btn-link form-icon" title="Edit description from website">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
          <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"/>
          <path fill-rule="evenodd"
                d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
                clip-rule="evenodd"/>
        </svg>
      </a>
    </div>
    <div class="form-input-hint">
      Optional, leave empty to use description from website.
    </div>
    {{ form.description.errors }}
  </div>
  <div class="form-group">
    <details class="notes"{% if form.has_notes %} open{% endif %}>
      <summary>
        <span class="form-label d-inline-block">Notes</span>
      </summary>
      <label for="{{ form.notes.id_for_label }}" class="text-assistive">Notes</label>
      {{ form.notes|add_class:"form-input"|attr:"rows:8" }}
      <div class="form-input-hint">
        Additional notes, supports Markdown.
      </div>
      {{ form.notes.errors }}
    </details>
  </div>
  <div class="form-group">
    <label for="{{ form.unread.id_for_label }}" class="form-checkbox">
      {{ form.unread }}
      <i class="form-icon"></i>
      <span>Mark as unread</span>
    </label>
    <div class="form-input-hint">
      Unread bookmarks can be filtered for, and marked as read after you had a chance to look at them.
    </div>
  </div>
  {% if request.user_profile.enable_sharing %}
    <div class="form-group">
      <label for="{{ form.shared.id_for_label }}" class="form-checkbox">
        {{ form.shared }}
        <i class="form-icon"></i>
        <span>Share</span>
      </label>
      <div class="form-input-hint">
        {% if request.user_profile.enable_public_sharing %}
          Share this bookmark with other registered users and anonymous users.
        {% else %}
          Share this bookmark with other registered users.
        {% endif %}
      </div>
    </div>
  {% endif %}
  <br/>
  <div class="form-group">
    {% if auto_close %}
      <input type="submit" value="Save and close" class="btn btn-primary mr-2">
    {% else %}
      <input type="submit" value="Save" class="btn btn-primary mr-2">
    {% endif %}
    <a href="{{ cancel_url }}" class="btn">Nevermind</a>
  </div>
  <script type="application/javascript">
    /**
     * - Pre-fill title and description placeholders with metadata from website as soon as URL changes
     * - Show hint if URL is already bookmarked
     * - Setup buttons that allow editing of scraped website values
     */
    (function init() {
      const urlInput = document.getElementById('{{ form.url.id_for_label }}');
      const titleInput = document.getElementById('{{ form.title.id_for_label }}');
      const descriptionInput = document.getElementById('{{ form.description.id_for_label }}');
      const notesDetails = document.querySelector('form details.notes');
      const notesInput = document.getElementById('{{ form.notes.id_for_label }}');
      const unreadCheckbox = document.getElementById('{{ form.unread.id_for_label }}');
      const sharedCheckbox = document.getElementById('{{ form.shared.id_for_label }}');
      const websiteTitleInput = document.getElementById('{{ form.website_title.id_for_label }}');
      const websiteDescriptionInput = document.getElementById('{{ form.website_description.id_for_label }}');
      const editedBookmarkId = {{ bookmark_id }};

      function toggleLoadingIcon(input, show) {
        const icon = input.parentNode.querySelector('i.form-icon');
        icon.style['visibility'] = show ? 'visible' : 'hidden';
      }

      function updatePlaceholder(input, value) {
        if (value) {
          input.setAttribute('placeholder', value);
        } else {
          input.removeAttribute('placeholder');
        }
      }

      function updateInput(input, value) {
        if (!input) {
          return;
        }
        input.value = value;
      }

      function updateCheckbox(input, value) {
        if (!input) {
          return;
        }
        input.checked = value;
      }

      function checkUrl() {
        toggleLoadingIcon(titleInput, true);
        toggleLoadingIcon(descriptionInput, true);
        updatePlaceholder(titleInput, null);
        updatePlaceholder(descriptionInput, null);

        const websiteUrl = encodeURIComponent(urlInput.value);
        const requestUrl = `{% url 'bookmarks:api-root' %}bookmarks/check?url=${websiteUrl}`;
        fetch(requestUrl)
          .then(response => response.json())
          .then(data => {
            const metadata = data.metadata;
            updatePlaceholder(titleInput, metadata.title);
            updatePlaceholder(descriptionInput, metadata.description);
            toggleLoadingIcon(titleInput, false);
            toggleLoadingIcon(descriptionInput, false);

            // Prefill form and display hint if URL is already bookmarked
            const existingBookmark = data.bookmark;
            const bookmarkExistsHint = document.querySelector('.form-input-hint.bookmark-exists');

            if (existingBookmark && !editedBookmarkId) {
              // Workaround: tag input will be replaced by tag autocomplete, so
              // defer getting the input until we need it
              const tagsInput = document.getElementById('{{ form.tag_string.id_for_label }}');

              bookmarkExistsHint.style['display'] = 'block';
              notesDetails.open = !!existingBookmark.notes;
              updateInput(titleInput, existingBookmark.title);
              updateInput(descriptionInput, existingBookmark.description);
              updateInput(notesInput, existingBookmark.notes);
              updateInput(tagsInput, existingBookmark.tag_names.join(" "));
              updateCheckbox(unreadCheckbox, existingBookmark.unread);
              updateCheckbox(sharedCheckbox, existingBookmark.shared);
            } else {
              bookmarkExistsHint.style['display'] = 'none';
            }
          });
      }

      function setupEditAutoValueButton(input) {
        const editAutoValueButton = input.parentNode.querySelector('.btn.form-icon');
        if (!editAutoValueButton) return;
        editAutoValueButton.addEventListener('click', function (event) {
          event.preventDefault();
          input.value = input.getAttribute('placeholder');
          input.focus();
          input.select();
        });
      }

      setupEditAutoValueButton(titleInput);
      setupEditAutoValueButton(descriptionInput);

      // Fetch initial website data if we have a URL, and we are not editing an existing bookmark
      // For existing bookmarks we get the website metadata through hidden inputs
      if (urlInput.value && !editedBookmarkId) {
        checkUrl();
      }
      urlInput.addEventListener('input', checkUrl);

      // Set initial website title and description for edited bookmarks
      if (editedBookmarkId) {
        updatePlaceholder(titleInput, websiteTitleInput.value);
        updatePlaceholder(descriptionInput, websiteDescriptionInput.value);
      }
    })();
  </script>
</div>