{% extends "dashboard_base.html" %}

{% block title %}{% if editing %}{{ t("source-form-title-edit") }}{% else %}{{ t("source-form-title-add") }}{% endif %} — calrs{% endblock %}

{% block dashboard_content %}

<div class="card">
  <h1>{% if editing %}{{ t("source-form-heading-edit") }}{% else %}{{ t("source-form-heading-add") }}{% endif %}</h1>
  <p class="subtitle">{% if editing %}{{ t("source-form-subtitle-edit") }}{% else %}{{ t("source-form-subtitle-add") }}{% endif %}</p>

  {% if error %}
    <div class="error" style="margin-top: 1rem;">{{ error }}</div>
  {% endif %}

  <form method="POST" {% if editing %}action="/dashboard/sources/{{ source_id }}/edit"{% endif %} style="margin-top: 1.25rem;">
    <div class="form-group">
      <label for="provider_type">{{ t("source-form-backend") }}</label>
      <select id="provider_type" name="provider_type" style="padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.925rem; font-family: inherit; background: var(--surface); color: var(--text); width: 100%;">
        <option value="caldav" {% if form_provider_type == "caldav" %}selected{% endif %}>CalDAV</option>
        <option value="ews" {% if form_provider_type == "ews" %}selected{% endif %}>Microsoft Exchange (EWS)</option>
      </select>
      <small style="display:block; margin-top: 0.25rem; color: var(--text-muted); font-size: 0.825rem;">
        {{ t("source-form-backend-help") }}
      </small>
    </div>

    <div class="form-group">
      <label for="provider">{{ t("source-form-preset") }}</label>
      <select id="provider" name="provider" style="padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.925rem; font-family: inherit; background: var(--surface); color: var(--text); width: 100%;">
        {% for p in providers %}
          <option value="{{ p.id }}" data-url="{{ p.url }}" data-backend="{{ p.backend }}" {% if p.id == form_provider %}selected{% endif %}>{{ p.name }}</option>
        {% endfor %}
      </select>
    </div>

    <div id="provider-help" style="margin: -0.25rem 0 1rem; padding: 0.75rem 1rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.825rem; color: var(--text-muted);">
      <div id="help-bluemind" class="provider-help-text">
        {{ t("source-form-help-bluemind") | safe }}
      </div>
      <div id="help-nextcloud" class="provider-help-text" style="display: none;">
        {{ t("source-form-help-nextcloud") | safe }}
      </div>
      <div id="help-fastmail" class="provider-help-text" style="display: none;">
        {{ t("source-form-help-fastmail") | safe }}
      </div>
      <div id="help-icloud" class="provider-help-text" style="display: none;">
        {{ t("source-form-help-icloud") | safe }}
      </div>
      <div id="help-zimbra" class="provider-help-text" style="display: none;">
        {{ t("source-form-help-zimbra") | safe }}
      </div>
      <div id="help-sogo" class="provider-help-text" style="display: none;">
        {{ t("source-form-help-sogo") | safe }}
      </div>
      <div id="help-radicale" class="provider-help-text" style="display: none;">
        {{ t("source-form-help-radicale") | safe }}
      </div>
      <div id="help-google" class="provider-help-text" style="display: none;">
        {{ t("source-form-help-google") | safe }}
        {% if google_oauth2_configured %}
        {{ t("source-form-help-google-configured") }}
        {% else %}
        <span style="color: var(--error-text);">{{ t("source-form-help-google-unconfigured") }}</span>
        {% endif %}
      </div>
      <div id="help-exchange" class="provider-help-text" style="display: none;">
        {{ t("source-form-help-exchange") | safe }}
      </div>
      <div id="help-other" class="provider-help-text" style="display: none;">
        {{ t("source-form-help-other") | safe }}
      </div>
    </div>

    <div id="google-connect" style="display: none; margin-bottom: 1rem;">
      {% if google_oauth2_configured %}
      <a href="/dashboard/sources/google/connect" class="btn" style="display: inline-block; text-decoration: none;">{{ t("source-form-connect-google") }}</a>
      {% else %}
      <p style="color: var(--text-muted); font-size: 0.875rem;">{{ t("source-form-google-unavailable") }}</p>
      {% endif %}
    </div>

    <div id="basic-auth-fields">
      <div class="form-group">
        <label for="name">{{ t("source-form-name") }}</label>
        <input type="text" id="name" name="name" value="{{ form_name }}" placeholder="{{ t('source-form-name-placeholder') }}">
      </div>

      <div class="form-group">
        <label for="url" id="url-label">{{ t("source-form-url-caldav") }}</label>
        <input type="url" id="url" name="url" value="{{ form_url }}" placeholder="https://...">
      </div>

      <div class="form-grid-2">
        <div class="form-group">
          <label for="username">{{ t("source-form-username") }}</label>
          <input type="text" id="username" name="username" value="{{ form_username }}" placeholder="alice">
        </div>
        <div class="form-group">
          <label for="password">{{ t("source-form-password") }}</label>
          <input type="password" id="password" name="password" {% if not editing %}required{% endif %} placeholder="{% if editing %}{{ t('source-form-password-keep') }}{% else %}{{ t('source-form-password-placeholder') }}{% endif %}">
        </div>
      </div>

      <div style="border-top: 1px solid var(--border); padding-top: 1.25rem; margin-top: 0.5rem;">
        <label style="display: flex; align-items: center; gap: 0.625rem; cursor: pointer; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); transition: all 0.15s ease;">
          <input type="checkbox" name="no_test" style="accent-color: var(--accent); width: 1.125rem; height: 1.125rem;">
          <div>
            <strong style="font-size: 0.925rem;">{{ t("source-form-skip-test") }}</strong>
            <div style="color: var(--text-muted); font-size: 0.825rem;">{{ t("source-form-skip-test-help") }}</div>
          </div>
        </label>
      </div>

      <button type="submit" class="btn" style="margin-top: 1.5rem;">{% if editing %}{{ t("source-form-save") }}{% else %}{{ t("source-form-add") }}{% endif %}</button>
    </div>
  </form>
</div>

<script>
(function() {
  var select = document.getElementById('provider');
  var typeSelect = document.getElementById('provider_type');
  var urlInput = document.getElementById('url');
  var urlLabel = document.getElementById('url-label');
  var nameInput = document.getElementById('name');

  var userEdited = urlInput.value !== '';

  // Snapshot of all presets at load time so we can rebuild the dropdown
  // after filtering by backend (some browsers ignore display:none on <option>).
  var allPresets = Array.prototype.map.call(select.options, function(o) {
    return {
      value: o.value,
      text: o.textContent,
      url: o.getAttribute('data-url') || '',
      backend: o.getAttribute('data-backend') || 'caldav',
    };
  });

  function filterPresetsByBackend() {
    var backend = typeSelect.value;
    var previous = select.value;
    select.innerHTML = '';
    var matched = false;
    allPresets.forEach(function(p) {
      if (p.backend !== backend) return;
      var opt = document.createElement('option');
      opt.value = p.value;
      opt.textContent = p.text;
      opt.setAttribute('data-url', p.url);
      opt.setAttribute('data-backend', p.backend);
      if (p.value === previous) {
        opt.selected = true;
        matched = true;
      }
      select.appendChild(opt);
    });
    if (!matched && select.options.length > 0) {
      select.selectedIndex = 0;
    }
  }

  function updateUrlLabel() {
    if (typeSelect.value === 'ews') {
      urlLabel.textContent = {{ t('source-form-url-ews') | tojson }};
    } else {
      urlLabel.textContent = {{ t('source-form-url-caldav') | tojson }};
    }
  }

  function updateProvider(autoFill) {
    var opt = select.options[select.selectedIndex];
    if (!opt) return;
    var id = opt.value;
    var url = opt.getAttribute('data-url');
    var isGoogle = (id === 'google');

    // Auto-fill URL only if user hasn't entered their own value
    if (autoFill && url && !userEdited) {
      urlInput.value = url;
    }

    // Auto-fill name if empty
    if (autoFill && nameInput.value === '') {
      nameInput.value = opt.textContent.trim().replace(/ \/ .*/, '');
    }

    // Show relevant help text (always)
    document.querySelectorAll('.provider-help-text').forEach(function(el) { el.style.display = 'none'; });
    var help = document.getElementById('help-' + id);
    if (help) help.style.display = 'block';

    // Toggle Google connect button vs basic auth fields
    document.getElementById('google-connect').style.display = isGoogle ? 'block' : 'none';
    document.getElementById('basic-auth-fields').style.display = isGoogle ? 'none' : 'block';

    updateUrlLabel();
  }

  urlInput.addEventListener('input', function() { userEdited = true; });
  select.addEventListener('change', function() { userEdited = false; updateProvider(true); });
  typeSelect.addEventListener('change', function() {
    userEdited = false;
    filterPresetsByBackend();
    updateProvider(true);
  });

  filterPresetsByBackend();
  updateProvider(false);
})();
</script>
{% endblock dashboard_content %}