.user-avatar(class!="<% if (isIocaine) { %> is-iocaine <% }; %>")
    img(
      style!="background-color: <%- bg %>"
      src!="<%- avatar %>"
      alt!="<%- fullName %>"
    )
    <% if (isIocaine) { %>
    .iocaine-symbol(title="{{ 'TASK.TITLE_ACTION_IOCAINE' | translate }}")
       tg-svg(svg-icon="icon-iocaine")
    <% }; %>

.assigned-to
    <% if (isUnassigned) { %>
    .assigned-title {{ "COMMON.ASSIGNED_TO.NOT_ASSIGNED" | translate }}
    <% } else { %>
    .assigned-title {{ "COMMON.FIELDS.ASSIGNED_TO" | translate }}
    <% }; %>

    .assigned-to-options
        <% if (!isEditable && fullNameVisible) { %>
        span.assigned-name(ng-non-bindable)
            <%- fullName %>
        <% }; %>

        <% if (isEditable) { %>
        a(
            href=""
            title="{{ 'COMMON.ASSIGNED_TO.TITLE_ACTION_EDIT_ASSIGNMENT'|translate }}"
            class!="user-assigned <% if (isEditable) { %>editable<% }; %>"
        )
            span.assigned-name(ng-non-bindable)
                <% if (fullNameVisible) { %>
                <%- fullName %>
                <% }; %>
                <% if (!isUnassigned) { %>
                tg-svg(svg-icon="icon-arrow-down")
                <% }; %>
        <% }; %>

        <% if (isEditable && isUnassigned) { %>
        span(translate="COMMON.OR")
        | &nbsp;
        a.assign-to-me(
            href="#"
            title="{{'COMMON.ASSIGNED_TO.SELF' | translate}}"
        )
            span {{ "COMMON.ASSIGNED_TO.SELF" | translate }}
        <% }; %>

    <% if (isEditable && !isUnassigned) { %>
    tg-svg.remove-user(
        svg-icon="icon-close",
        title="{{'COMMON.ASSIGNED_TO.DELETE_ASSIGNMENT' | translate}}"
    )
    <% } %>