{% extends "base.html" %}
{% block title %}{{ brand.name or 'New Brand' }}{% endblock %}
{% block content %}
<div class="page-head"><div><a href="{{ url_for('brands') }}" class="back">{{ icon("back", 14) }} Brands</a><h1>{{ brand.name or 'New Company Brand' }}</h1></div></div>
<div class="look-layout">
<form method="post" enctype="multipart/form-data" class="card" id="brand-form">
  <div class="import-box">
    <div><b>{{ icon('sparkle', 15) }} Copy branding from a website</b>
      <p class="hint" style="margin:2px 0 10px">Fills in the name, logo, colours and font from the company's site. Check them, then save.</p></div>
    <div class="import-row">
      <input type="text" id="import_url" value="{{ brand.website or '' }}" placeholder="yourcompany.com" autocomplete="off">
      <button type="button" class="btn" id="import_btn">Copy</button>
    </div>
    <div id="import_result" class="import-result" hidden></div>
  </div>
  <input type="hidden" name="logo_import" id="logo_import"><input type="hidden" name="logo_tone" id="logo_tone_in">
  <input type="hidden" name="google_font" id="google_font" value="{{ '1' if brand.google_font else '' }}">
  <div class="field"><label>Company name</label><input type="text" name="name" value="{{ brand.name or '' }}" required></div>
  <div class="field"><label>Website</label><input type="text" name="website" value="{{ brand.website or '' }}" placeholder="company.com"></div>
  <div class="field"><label>Logo</label>
    <div class="logo-preview" id="logo_preview" style="background:{{ '#ffffff' if brand.logo_tone == 'dark' else (brand.primary_color or '#1F4E79') }}" {{ 'hidden' if not logo_src }}><img src="{{ logo_src }}" alt=""></div>
    {% if logo_src %}
      <label class="check"><input type="checkbox" name="remove_logo"> <span>Remove logo (show the company name instead)</span></label>{% endif %}
    <p class="hint">Upload a PNG or JPG (under 400 KB). It's embedded in each email, so it always shows. A logo with a transparent or white background works best on the coloured band.</p>
    <input type="file" name="logo" accept=".png,.jpg,.jpeg,.gif">
    <details class="small"><summary>Or use a link to a logo hosted online</summary><input type="text" name="logo_url" value="{{ brand.logo_url or '' }}" placeholder="https://…/logo.png" style="margin-top:6px"></details>
  </div>
  <div class="row">
    <div class="field"><label>Header colour</label><input type="color" name="primary_color" value="{{ brand.primary_color or '#1F4E79' }}"></div>
    <div class="field"><label>Accent</label><input type="color" name="accent_color" value="{{ brand.accent_color or '#F2A900' }}"></div>
    <div class="field"><label>Background</label><input type="color" name="background_color" value="{{ brand.background_color or '#F4F6F9' }}"></div>
  </div>
  <div class="field"><label>Font</label><select name="font" id="font">
      <optgroup label="Shown everywhere">{% for f in fonts %}<option value="{{ f }}" {{ 'selected' if (brand.font or 'Arial') == f }}>{{ f }}</option>{% endfor %}</optgroup>
      <optgroup label="Web fonts" id="web_fonts">{% for f in web_fonts %}<option value="{{ f }}" {{ 'selected' if brand.font == f }}>{{ f }}</option>{% endfor %}
        {% if brand.font and brand.font not in fonts and brand.font not in web_fonts %}<option value="{{ brand.font }}" selected>{{ brand.font }}</option>{% endif %}</optgroup>
    </select>
    <p class="hint" style="margin-top:6px">Web fonts show in Apple Mail and on iPhones. Gmail and Outlook use a similar standard font instead.</p></div>
  <div class="field"><label>Email footer</label><input type="text" name="footer" value="{{ brand.footer or '' }}" placeholder="Company · Address · Registration"></div>
  <div class="field"><label>How should this company's emails sound?</label><textarea name="voice" rows="3" placeholder="e.g. Friendly and direct. Short sentences.">{{ (brand.voice or '')|trim }}</textarea></div>
  <div class="actions"><button class="btn primary big">Save</button>
    {% if key and key != 'main' %}<button class="btn danger" form="del" style="margin-left:auto">Delete Brand</button>{% endif %}</div>
</form>
{% if key and key != 'main' %}<form id="del" method="post" action="{{ url_for('brand_delete', key=key) }}" data-confirm="Delete this brand?"></form>{% endif %}
<div>
  {% if key %}
  <div class="preview-head"><b>Preview</b>
    <span class="seg"><a href="#" data-style="branded" class="on">Branded</a><a href="#" data-style="personal">Personal</a></span></div>
  <div class="msg"><iframe id="preview" data-autosize src="{{ url_for('brand_preview', key=key) }}"></iframe></div>
  <p class="muted small">Save to update the preview.</p>
  {% else %}<div class="card empty">Save the brand to see a preview.</div>{% endif %}
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
// Copy branding from a website: fill the form for the person to check, then save.
const ib = document.getElementById('import_btn'), out = document.getElementById('import_result');
async function copyBranding() {
  const url = document.getElementById('import_url').value.trim();
  if (!url) { document.getElementById('import_url').focus(); return; }
  ib.disabled = true; ib.textContent = 'Looking…'; out.hidden = false; out.className = 'import-result';
  out.textContent = 'Reading ' + url + '. This takes a few seconds.';
  try {
    const res = await fetch('{{ url_for("brand_from_website") }}', {method: 'POST', headers: {'Content-Type': 'application/json'},
                                                                     body: JSON.stringify({url})});
    const d = await res.json();
    if (!res.ok) throw new Error(d.error || 'That did not work.');
    const form = document.getElementById('brand-form'), set = (n, v) => { if (v) form.elements[n].value = v; };
    set('name', d.name); set('website', d.website);
    if (d.footer && !form.elements.footer.value) set('footer', d.footer);
    set('primary_color', d.primary_color); set('accent_color', d.accent_color); set('background_color', d.background_color);
    const font = form.elements.font;
    if (d.font) {
      if (![...font.options].some(o => o.value === d.font)) document.getElementById('web_fonts').appendChild(new Option(d.font, d.font));
      font.value = d.font;
    }
    document.getElementById('google_font').value = d.google_font ? '1' : '';
    const prev = document.getElementById('logo_preview');
    if (d.logo_file) {
      document.getElementById('logo_import').value = d.logo_file;
      document.getElementById('logo_tone_in').value = d.logo_tone || '';
      prev.hidden = false; prev.querySelector('img').src = d.logo_src;
      prev.style.background = d.logo_tone === 'dark' ? '#ffffff' : d.primary_color;
    }
    const sw = c => `<span class="swatch" style="background:${c}"></span>`;
    out.className = 'import-result ok';
    out.innerHTML = `<b>Found:</b> ${d.logo_file ? 'logo, ' : ''}${sw(d.primary_color)}${sw(d.accent_color)}${sw(d.background_color)} colours` +
      (d.font ? `, ${d.font} font` : '') + '. Check the details below, then press <b>Save</b>.' +
      (d.notes || []).map(n => `<div class="muted small" style="margin-top:6px">${n.replace(/</g, '&lt;')}</div>`).join('');
  } catch (e) {
    out.className = 'import-result err'; out.textContent = e.message;
  } finally { ib.disabled = false; ib.textContent = 'Copy'; }
}
ib.addEventListener('click', copyBranding);
document.getElementById('import_url').addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); copyBranding(); } });
document.querySelectorAll('.seg a').forEach(a => a.addEventListener('click', e => {
  e.preventDefault(); document.querySelectorAll('.seg a').forEach(x => x.classList.toggle('on', x === a));
  document.getElementById('preview').src = '{{ url_for("brand_preview", key=key or "main") }}?style=' + a.dataset.style;
}));
</script>
{% endblock %}