{# A section of profile's edit page (profile.edit.sections), below the
   profile form. The iD links to its record on ORCID (orcid_url, on the
   ORCID the product signs in with). The disconnect button opens
   identities' modal, which posts the provider and iD it carries; for the
   only way the account signs in, a link to set a password comes first. The
   colours are in assets/css/orcid.css, and the mark is simple-icons'
   (icon(set='brands')), drawn in currentColor. #}
{% if identity %}
<div class="mb-4 profile-identity" data-identity="orcid">
    <label class="form-label fw-semibold">ORCID</label>
    <div class="form-control d-flex align-items-center gap-2 orcid-identity__field">
        {{ icon('orcid', set='brands', class_='orcid-mark') }}
        <a class="orcid-identity__value" href="{{ orcid_url }}" target="_blank" rel="noopener noreferrer">{{ identity.provider_id }}</a>
        {% if can_disconnect %}
        <button type="button" class="btn btn-sm p-0 orcid-identity__disconnect" title="{{ _('Disconnect') }}" aria-label="{{ _('Disconnect') }}" data-bs-toggle="modal" data-bs-target="#disconnectModal" data-provider="orcid" data-provider-id="{{ identity.provider_id }}">
            {{ icon('x') }}
        </button>
        {% else %}
        {# The only way the account signs in: a password of its own comes
           first, on My account, and then it can be disconnected. #}
        <a class="ms-auto small orcid-identity__set-password" href="{{ url_for('auth.my_account', _anchor='password') }}" data-set-password-first>{{ _('Set a password to disconnect it') }}</a>
        {% endif %}
    </div>
</div>
{% else %}
<div class="mb-4 profile-identity" data-identity="orcid">
    <label class="form-label fw-semibold">ORCID</label>
    <a href="{{ url_for('orcid.connect_orcid') }}" class="form-control text-decoration-none d-flex align-items-center gap-2 orcid-identity__field orcid-identity__connect">
        {{ icon('orcid', set='brands', class_='orcid-mark') }}
        <span>{{ _('Connect ORCID') }}</span>
    </a>
</div>
{% endif %}