{# small building blocks shared by the pages #}
{% macro page_head(name, title, sub='') %}
<div class="page-head">
  <span class="ph-ic">{{ icon(name) }}</span>
  <div><h1>{{ title }}</h1>{% if sub %}<p>{{ sub }}</p>{% endif %}</div>
  {% if caller %}<div class="ph-actions">{{ caller() }}</div>{% endif %}
</div>
{% endmacro %}

{% macro role_pill(role) %}<span class="pill {{ role }}">{{ icon('shield' if role == 'admin' else 'user') }}{{ role|capitalize }}</span>{% endmacro %}

{% macro empty(name, text) %}
<div class="empty-state">{{ icon(name) }}<p>{{ text }}</p></div>
{% endmacro %}

{% macro college_badge(c, size=28, cls='') %}
{# A college's logo: the one uploaded for it if there is one, otherwise fetched automatically from its website. Falls back to a plain cap icon. #}
{% set src = logo_url(c) %}
<span class="clogo{{ ' has-url' if src }}{{ ' ' + cls if cls }}" style="width:{{ size }}px;height:{{ size }}px">
  {% if src %}<img src="{{ src }}" alt="" loading="lazy" onerror="this.remove();this.parentElement.classList.remove('has-url')">{% endif %}
  <span class="clogo-ic">{{ icon('cap') }}</span>
</span>
{% endmacro %}

{% macro logo_field(custom_src='') %}
{# The College Logo field: shows the logo fetched from the College URL, with an upload to use instead when it can't be found.
   Needs the form to be multipart and an input#collegeUrl on the page. #}
<div class="field" id="logoField">
  <label for="logoFile">College Logo</label>
  <div class="logo-row">
    <span class="clogo" id="logoBox" style="width:56px;height:56px">
      <img id="logoImg" alt="" hidden>
      <span class="clogo-ic">{{ icon('cap') }}</span>
    </span>
    <div class="logo-side">
      <p class="hint" id="logoHint">Fetched automatically from the College URL above. If it can't be found, upload your own image instead.</p>
      <div class="logo-pick">
        <input type="file" name="logo" id="logoFile" accept="image/png,image/jpeg,image/gif,image/webp">
        <button type="button" class="btn small ghost" id="logoClear" hidden>{{ icon('x') }} Clear</button>
      </div>
      {% if custom_src %}
      <label class="logo-remove"><input type="checkbox" name="remove_logo" id="removeLogo" value="1"> Remove the uploaded logo and use the automatic one</label>
      {% endif %}
      <p class="hint logo-status" id="logoStatus" hidden></p>
      <p class="hint">PNG, JPG, GIF or WebP, up to 2&nbsp;MB.</p>
    </div>
  </div>
</div>
<style>
  .logo-row { display: flex; align-items: flex-start; gap: 14px; }
  .logo-row .hint { margin: 0 0 6px; }
  .logo-side { flex: 1; min-width: 0; }
  .logo-side [hidden] { display: none !important; }
  .logo-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
  .logo-remove { display: flex; align-items: center; gap: 6px; font-size: .88rem; margin-bottom: 6px; cursor: pointer; }
  .logo-status { color: var(--muted); font-weight: 600; }
  .logo-status.warn { color: #d97706; }
</style>
<script>
  (function () {
    var urlInput = document.getElementById('collegeUrl'), img = document.getElementById('logoImg'), box = document.getElementById('logoBox');
    var file = document.getElementById('logoFile'), clear = document.getElementById('logoClear'), status = document.getElementById('logoStatus');
    var remove = document.getElementById('removeLogo'), custom = {{ custom_src|tojson }};
    var MAX = 2 * 1024 * 1024, blobUrl = null;

    function say(text, warn) { status.hidden = !text; status.textContent = text || ''; status.classList.toggle('warn', !!warn); }
    function show(src) { img.hidden = false; box.classList.remove('has-url'); img.src = src; }
    function hide() { img.hidden = true; img.removeAttribute('src'); box.classList.remove('has-url'); }

    function update() {
      say('');
      if (blobUrl) { show(blobUrl); say('Using the logo you chose: ' + file.files[0].name); return; }
      if (custom && !(remove && remove.checked)) { show(custom); say('Using the logo you uploaded earlier.'); return; }
      var v = urlInput.value.trim();
      if (!v) { hide(); return; }
      if (!/^https?:\/\//i.test(v)) v = 'https://' + v;
      try {
        var host = new URL(v).hostname;
        if (!host) throw new Error('no host');
        show('https://www.google.com/s2/favicons?sz=128&domain=' + encodeURIComponent(host));
      } catch (e) { hide(); }
    }

    img.addEventListener('load', function () {
      box.classList.add('has-url');
      if (!blobUrl && !(custom && !(remove && remove.checked)) && img.naturalWidth && img.naturalWidth < 32)
        say('Only a very small or default icon was found - upload a better logo if this is not right.', true);
    });
    img.addEventListener('error', function () {
      img.hidden = true; box.classList.remove('has-url');
      if (!blobUrl && urlInput.value.trim()) say("We couldn't fetch a logo from this URL - choose an image file to upload instead.", true);
    });

    file.addEventListener('change', function () {
      if (blobUrl) { URL.revokeObjectURL(blobUrl); blobUrl = null; }
      var f = file.files[0];
      clear.hidden = !f;
      if (f && f.size > MAX) { file.value = ''; clear.hidden = true; update(); say('That image is over 2 MB - choose a smaller one.', true); return; }
      if (f) { blobUrl = URL.createObjectURL(f); if (remove) remove.checked = false; }
      update();
    });
    clear.addEventListener('click', function () { file.value = ''; file.dispatchEvent(new Event('change')); });
    if (remove) remove.addEventListener('change', update);
    urlInput.addEventListener('input', update);
    update();
  })();
</script>
{% endmacro %}

{% macro rich_editor(name, value='', required=False, placeholder='') %}
{# A small rich-text editor: bold/italic/underline, bullet/numbered lists, indent, alignment.
   Posts sanitized-on-save HTML through a hidden field named `name`. #}
<div class="rich-field" data-name="{{ name }}">
  <div class="rich-toolbar" role="toolbar" aria-label="Formatting">
    <button type="button" data-cmd="bold" title="Bold" aria-label="Bold">{{ icon('bold') }}</button>
    <button type="button" data-cmd="italic" title="Italic" aria-label="Italic">{{ icon('italic') }}</button>
    <button type="button" data-cmd="underline" title="Underline" aria-label="Underline">{{ icon('underline') }}</button>
    <span class="rich-sep"></span>
    <button type="button" data-cmd="insertUnorderedList" title="Bulleted list" aria-label="Bulleted list">{{ icon('list') }}</button>
    <button type="button" data-cmd="insertOrderedList" title="Numbered list" aria-label="Numbered list">{{ icon('list-ordered') }}</button>
    <span class="rich-sep"></span>
    <button type="button" data-cmd="outdent" title="Decrease indent" aria-label="Decrease indent">{{ icon('indent-decrease') }}</button>
    <button type="button" data-cmd="indent" title="Increase indent" aria-label="Increase indent">{{ icon('indent-increase') }}</button>
    <span class="rich-sep"></span>
    <button type="button" data-cmd="justifyLeft" title="Align left" aria-label="Align left">{{ icon('align-left') }}</button>
    <button type="button" data-cmd="justifyCenter" title="Align center" aria-label="Align center">{{ icon('align-center') }}</button>
    <button type="button" data-cmd="justifyRight" title="Align right" aria-label="Align right">{{ icon('align-right') }}</button>
    <button type="button" data-cmd="justifyFull" title="Justify" aria-label="Justify">{{ icon('align-justify') }}</button>
  </div>
  <div class="rich-editor" contenteditable="true" data-placeholder="{{ placeholder }}">{{ value|safe }}</div>
  <textarea name="{{ name }}" class="rich-raw" tabindex="-1" aria-hidden="true" {{ 'required' if required }}></textarea>
</div>
{% endmacro %}

{% macro college_meta(c) %}
{% if c.location or c.timezone or c.url %}
<div class="sub-line">
  {% if c.location %}<span>{{ icon('map-pin') }}{{ c.location }}</span>{% endif %}
  {% if c.timezone %}<span>{{ icon('clock') }}{{ c.timezone }}</span>{% endif %}
  {% if c.url %}<a href="{{ c.url }}" target="_blank" rel="noopener noreferrer">{{ icon('link') }}Visit site</a>{% endif %}
</div>
{% endif %}
{% endmacro %}