{# ===================================================================
   Start Page controls — used twice, with two different scopes:

     scope="user"    what I see           -> /api/user/preferences
     scope="global"  what a new account
                     sees by default      -> PUT /api/settings (admin)

   Both render the same objects, so learning one teaches the other. The
   ids carry the scope so the settings page can show both at once, and
   static/start_page.js drives them from the same code path.

   Each scope is ONE card. Rows, cards-per-row and the filters are facets
   of a single decision ("what does this home page look like"), not three
   unrelated settings -- rendering them as three separate cards made the
   page read as six independent things and buried the fact that the whole
   lower half is just the same form again for a different audience.

   The row labels/hints are rendered here (through Flask-Babel) and read
   by the JS from window.__STARTPAGE_I18N -- the row list itself is built
   client-side from /api/home-feed/sources, because which sources exist
   depends on which modules are installed.
   =================================================================== #}

{% macro start_page_i18n() %}
<script>
  window.__STARTPAGE_I18N = {{ {
    'rows': {
      'continue':  _('Continue watching'),
      'library':   _('New in your library'),
      'watchlist': _('Your watchlist'),
      'upcoming':  _('Airing next'),
      'new':       _('New this week'),
      'popular':   _('Popular right now'),
      'movies':    _('Movies'),
      'gaps':      _('Fill the gaps')
    },
    'hints': {
      'playback':   _('from your playback progress'),
      'library':    _('from your library'),
      'favourites': _('from your favourites'),
      'calendar':   _('from the calendar'),
      'sources':    _('from your sources')
    },
    'move_up': _('Move up'),
    'move_down': _('Move down'),
    'drag': _('Drag to reorder'),
    'show_row': _('Show this row'),
    'saved': _('Saved'),
    'save_failed': _('Could not be saved'),
    'layout_saved': _('Saved — reload the home page'),
    'reset_done': _('Reset to the instance default'),
    'using_default': _('Following the instance default'),
    'using_own': _('You changed this — the instance default no longer applies')
  }|tojson }};
</script>
{% endmacro %}


{# heading/intro are optional: the settings page passes them so the card
   carries its own title, the home page modal leaves them empty because the
   modal already has a title of its own. #}
{% macro start_page_form(scope, show_new_home_toggle=False, heading='', intro='') %}
<div class="settings-section sp-form" data-sp-scope="{{ scope }}">
  {% if heading %}
  <h2>{{ heading }}</h2>
  {% if intro %}<div class="settings-hint sp-intro">{{ intro }}</div>{% endif %}
  {% endif %}

  {# Layout comes first: it decides which home page the rows underneath are
     rendered into at all, so the card reads from the biggest decision to the
     smallest. #}
  {% if show_new_home_toggle %}
  <div class="sp-group">
    <h3 class="settings-subtitle">{{ _('Layout') }}</h3>
    <label class="settings-checkbox-row" for="newHomeEnabled">
      <input type="checkbox" class="chb-main" id="newHomeEnabled" onchange="saveNewHomeEnabled()" />
      <span>{{ _('Use the new home page (Beta)') }}</span>
    </label>
    <div class="settings-hint">{{ _('Groups the discovery rows by question instead of by source: "New this week" and "Popular right now" mix every enabled source and each poster names where it came from. The classic layout keeps one block per source with its own rows. Reload the home page after changing this.') }}</div>
    <div class="settings-hint">{{ _('This is the default for accounts that have not picked a layout themselves — everyone can overrule it on their profile page.') }}</div>
  </div>
  {% endif %}

  {# The same decision for THIS account. A select and not a checkbox, because
     "follow whatever the admin set" is a real third state and a checkbox
     cannot say it: switching to the new layout and switching back are two
     different things, and only one of them should keep following the
     instance default afterwards. #}
  {% if scope == 'user' %}
  <div class="sp-group">
    <h3 class="settings-subtitle">{{ _('Layout') }}</h3>
    <div class="settings-hint">{{ _('Which home page you see. Only you — nobody else on this instance is affected.') }}</div>
    <div class="settings-row">
      <select class="mf-token-input" id="spLayout-user">
        <option value="">{{ _('Follow the instance default') }}</option>
        <option value="0">{{ _('Classic home page') }}</option>
        <option value="1">{{ _('New home page (Beta)') }}</option>
      </select>
    </div>
  </div>
  {% endif %}

  <div class="sp-group">
    <h3 class="settings-subtitle">{{ _('Rows') }}</h3>
    <div class="settings-hint">
      {% if scope == 'user' %}
      {{ _('Which rows your home page shows, and in which order. Switch one off and MediaForge stops collecting its data as well.') }}
      {% else %}
      {{ _('The order and visibility a new account starts with. Every user can overrule this for themselves.') }}
      {% endif %}
    </div>
    <div class="mf-order-list" id="spRows-{{ scope }}"></div>
    {% if scope == 'user' %}
    <div class="settings-hint" id="spState-{{ scope }}"></div>
    {% endif %}
  </div>

  <div class="sp-group">
    <h3 class="settings-subtitle">{{ _('Cards per row') }}</h3>
    <div class="settings-hint">{{ _('How many cards a discovery row holds at most. Fewer cards means less to fetch and a shorter page.') }}</div>
    <div class="settings-row">
      <select class="mf-token-input" id="spCards-{{ scope }}">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="40">40</option>
        <option value="60">60</option>
      </select>
    </div>
  </div>

  {# The Jellyfin/Plex profile picker used to sit here, in the user scope. It
     moved to /profile (templates/profile.html), which is where the account's
     own settings belong -- it only landed in this modal because /settings is
     admin-only and there was nowhere else a normal account could reach. #}

  {% if scope == 'global' %}
  <div class="sp-group">
    <h3 class="settings-subtitle">{{ _('Default filters') }}</h3>
    <div class="settings-hint">{{ _('Which chips are off when someone opens the home page for the first time. This is a starting point, not a restriction — every user can switch them back on. To take a source away entirely, disable it under Sources.') }}</div>
    {# One level below .settings-subtitle: these two only label the check
       grids inside the "Default filters" group, so they must not compete
       with the group headings themselves. #}
    <div class="sp-sublabel">{{ _('Sources') }}</div>
    <div id="spSources-{{ scope }}" class="sp-checks"></div>
    <div class="sp-sublabel">{{ _('Type') }}</div>
    <div id="spTypes-{{ scope }}" class="sp-checks"></div>
  </div>

  {# Kids mode is armed HERE, not on the home page. Instance-wide because it
     is an instance decision: a per-account PIN would be set by the very
     account it is supposed to restrict. The button only appears on the home
     page once this is on AND a PIN exists -- both, because a mode nobody can
     leave would lock the account out of its own home page. #}
  <div class="sp-group">
    <h3 class="settings-subtitle">{{ _('Kids mode') }}</h3>
    <div class="settings-hint">{{ _('Adds a “Kids” button to the home page that limits it to an age rating. The limit is applied on the server while the rows are built, so it cannot be bypassed from the browser. Leaving the mode asks for the PIN; entering it never does.') }}</div>
    {# .chb-main goes on the INPUT and .settings-checkbox-row on the label --
       that is the pattern every other checkbox in this app uses. Putting
       chb-main on the <label> gave the label itself the 16x16 checkbox
       styling *with a real checkbox inside it*, which is why it looked like
       two checkboxes nested in each other and the text spilled over the rows
       below. #}
    <div class="settings-row">
      <label class="settings-checkbox-row" for="spKidsOn-{{ scope }}">
        <input type="checkbox" class="chb-main" id="spKidsOn-{{ scope }}">
        <span>{{ _('Offer kids mode on the home page') }}</span>
      </label>
    </div>
    {# h3.settings-subtitle above the row, not an inline <label> beside the
       control: that is how every other group in this form is labelled
       ("Cards per row", "Default filters"), and .settings-label has no rule
       of its own here at all -- it rendered as bare wrapping text. #}
    <h3 class="settings-subtitle">{{ _('Age limit') }}</h3>
    <div class="settings-row">
      <select class="mf-token-input" id="spKidsFsk-{{ scope }}"
              aria-label="{{ _('Age limit') }}">
        <option value="0">0</option>
        <option value="6" selected>6</option>
        <option value="12">12</option>
        <option value="16">16</option>
      </select>
    </div>

    <h3 class="settings-subtitle">{{ _('PIN') }}</h3>
    <div class="settings-row">
      <input type="password" class="mf-token-input" id="spKidsPin-{{ scope }}"
             autocomplete="new-password" inputmode="numeric"
             aria-label="{{ _('PIN') }}" placeholder="{{ _('4–8 digits') }}">
    </div>
    <div class="settings-hint" id="spKidsState-{{ scope }}"></div>
  </div>
  {% endif %}

  <div class="sp-group sp-reset">
    <button type="button" class="btn btn-secondary" id="spReset-{{ scope }}">
      {% if scope == 'user' %}{{ _('Reset to the instance default') }}{% else %}{{ _('Reset to the factory default') }}{% endif %}
    </button>
  </div>
</div>
{% endmacro %}