{# Fields of a key sign-in, shared by a sync's Account step and the service builder's
   Test account tab, so the two can't drift. Their explanations are info hovers.

   server_address_field: a self-hosted service's address, with the http confirmation
   that only shows while the address starts with http:// (sync.js: initServerAddress).
   Rendered visible, so without the script the box is there when it's needed. #}
{% macro server_address_field(id, value='') %}
    {% set help = _("Your server's address, like photos.example.com. Yaffo uses https unless you type http://, which is only allowed for a server on your home network. Yaffo talks only to this server for this account.") %}
    <div class="form-group" data-server-address>
        <div class="sync-option-label">
            <label for="{{ id }}">{{ _("Server address") }}</label>
            <button type="button" class="help-tip" data-icon="info" aria-label="{{ help }}" data-tooltip="{{ help }}"></button>
        </div>
        <input type="text" id="{{ id }}" name="base_url" required inputmode="url" value="{{ value or '' }}"
               placeholder="{{ _('photos.example.com or http://192.168.1.20:2283') }}" data-base-url>
        <label class="checkbox-label sync-allow-http" data-allow-http>
            <input type="checkbox" name="allow_http" value="1">
            <span>{{ _("This server is on my home network and uses http. I understand the key travels unencrypted on my network.") }}</span>
        </label>
    </div>
{% endmacro %}

{# api_key_field: the key, with where to find it (the service's own words) and what
   Yaffo does with it in one hover. #}
{% macro api_key_field(id, label, key_help='') %}
    {% set help = ((key_help ~ ' ') if key_help else '') ~ _("Yaffo checks the key, then keeps it in your system's keychain. It's never shown again.") %}
    <div class="form-group">
        <div class="sync-option-label">
            <label for="{{ id }}">{{ label }}</label>
            <button type="button" class="help-tip" data-icon="info" aria-label="{{ help }}" data-tooltip="{{ help }}"></button>
        </div>
        <input type="password" id="{{ id }}" name="api_key" required>
    </div>
{% endmacro %}