{{- define "main" }}
<article class="post-single">
  <header class="post-header">
    <h1 class="post-title">{{ .Title }}</h1>
  </header>

  <div class="post-content">
    <noscript><p>JavaScript is required to use this page.</p></noscript>

    <div id="share-ready" hidden>
      <form id="share-form" autocomplete="off">
        <label for="message">Your post</label>
        <textarea id="message" name="message" rows="4" required></textarea>

        <label for="instance">Your Mastodon instance</label>
        <div class="mastodon-input-row">
          <span class="mastodon-prefix">https://</span>
          <input type="text" id="instance" name="instance"
                 placeholder="mastodon.social" required>
          <button type="submit">Share</button>
        </div>
        <label class="mastodon-remember">
          <input type="checkbox" id="remember" name="remember">
          Remember my instance
        </label>
      </form>
    </div>
  </div>
</article>

<style>
  .mastodon-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
  }

  .mastodon-prefix {
    color: var(--secondary);
  }

  #message {
    width: 100%;
    min-height: 6em;
    padding: 8px 12px;
    font: inherit;
    color: var(--primary);
    background: var(--theme);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    resize: vertical;
    margin: 8px 0;
    box-sizing: border-box;
  }

  #message:focus {
    border-color: var(--primary);
  }

  #instance {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    font: inherit;
    color: var(--primary);
    background: var(--theme);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    outline: none;
  }

  #instance:focus {
    border-color: var(--primary);
  }

  #share-form button[type="submit"] {
    padding: 8px 20px;
    font: inherit;
    color: var(--theme);
    background: var(--primary);
    border: 2px solid var(--primary);
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
  }

  #share-form button[type="submit"]:hover {
    opacity: 0.85;
  }

  .mastodon-remember {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--secondary);
    cursor: pointer;
  }
</style>

<script>
(function () {
  var params = new URLSearchParams(window.location.search);
  var text = params.get('text') || '';
  var url = params.get('url') || '';

  // Default to sharing the site when visited without params
  if (!text && !url) {
    text = {{ site.Title | jsonify | safeJS }};
    url = {{ site.BaseURL | jsonify | safeJS }};
  }

  document.getElementById('share-ready').hidden = false;

  // Populate textarea with sensible default
  var messageEl = document.getElementById('message');
  var defaultMessage = '';
  if (text) defaultMessage += text;
  if (url) defaultMessage += (defaultMessage ? '\n' : '') + url;
  messageEl.value = defaultMessage;

  // Try to open a local Mastodon app via protocol handler.
  // If nothing handles it, the page stays as-is and the form below works.
  window.location.href = 'web+mastodon://share?text='
    + encodeURIComponent(messageEl.value);

  var instanceInput = document.getElementById('instance');
  var rememberCheck = document.getElementById('remember');
  var saved = localStorage.getItem('mastodon-instance');

  if (saved) {
    instanceInput.value = saved;
    rememberCheck.checked = true;
  }

  document.getElementById('share-form').addEventListener('submit', function (e) {
    e.preventDefault();

    var instance = instanceInput.value.trim()
      .replace(/^https?:\/\//, '')
      .replace(/\/+$/, '');

    if (!instance) return;

    if (rememberCheck.checked) {
      localStorage.setItem('mastodon-instance', instance);
    } else {
      localStorage.removeItem('mastodon-instance');
    }

    window.open(
      'https://' + instance + '/share?text=' + encodeURIComponent(messageEl.value),
      '_blank',
      'noopener'
    );
  });
})();
</script>
{{- end }}