{# A section of profile's edit page (profile.edit.sections), below the
   profile form. The disconnect button opens identities' modal, which posts
   the provider and iD it carries. The colours are in assets/css/orcid.css,
   and the mark is 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">
        <svg class="orcid-mark" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <circle cx="8" cy="12" r="3" fill="currentColor"></circle>
            <line x1="16" y1="9" x2="16" y2="15"></line>
        </svg>
        <span class="orcid-identity__value">{{ identity.provider_id }}</span>
        <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 }}">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <line x1="18" y1="6" x2="6" y2="18"></line>
                <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
        </button>
    </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">
        <svg class="orcid-mark" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <circle cx="8" cy="12" r="3" fill="currentColor"></circle>
            <line x1="16" y1="9" x2="16" y2="15"></line>
        </svg>
        <span>{{ _('Connect ORCID') }}</span>
    </a>
</div>
{% endif %}