{% set classes = classes|default([])|classes %}
{% set modifiers = modifiers|default([])|modifiers("UserPicture") %}
{% set attrs = attrs|default({})|attrs %}
{% set completion = completion is defined ? completion : false %}
{% set badge = badge|default(false) %}

{% set strokeColor = "UserPicture--stroke-r" %}
{% if completion and completion >= 1 %}
    {% set strokeColor = "UserPicture--stroke-g" %}
{% elseif completion and completion > 0.5  %}
    {% set strokeColor = "UserPicture--stroke-gold" %}
{% endif %}

<div class="UserPicture {{ strokeColor }} {{ classes }} {{ modifiers }}" style="background-image: url('{{ image }}'); --score: {{ completion|default(0) }};" {{ attrs|raw }}>
    {% include component("icon") with {
        classes: ["UserPicture_certification"],
        name: "certification-min",
    } only %}

    {% include component("icon") with {
        classes: ["UserPicture_ambassador"],
        name: "ambassador-min",
    } only %}

    {% include component("icon") with {
        classes: ["UserPicture_identity_verified"],
        name: "identity_verified",
    } only %}

    <div class="UserPicture_edit">
        <i class="fal fa-camera-alt"></i>
    </div>

    {% if badge %}
        <div class="UserPicture_badge {{ badge.classes|default([])|classes }}" {{ badge.attrs|default({})|attrs|raw }}>
            <i class="{{ badge.style|default("fal") }} fa-{{ badge.fa|default("star") }}"></i>
        </div>
    {% endif %}
    
    <i class="UserPicture_guaranted fal fa-shield"></i>
    <i class="UserPicture_verified fal fa-check-circle"></i>

    {% if completion %}
        <svg class="UserPicture_score" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" xml:space="preserve">
            <circle cx="25" cy="25" r="23"/>
        </svg>
    {% endif %}
</div>