{% sw_extends '@Storefront/storefront/utilities/offcanvas.html.twig' %}
{% block utilities_offcanvas_content %}
<div class="account-menu">
{% block layout_header_actions_account_widget_dropdown_header %}
{% if context.customer.id %}
<div class="dropdown-header account-menu-header">
<div class="dropdown-icon-name-email">
<div class="dropdown-icon">
<img src="{{ asset('storefront/img/Icon-Avatar-Orange-Desktop.svg', '@HBCTheme') }}">
</div>
<div class="dropdown-name-email">
<p class="dropdown-name">{{ context.customer.firstName }} {{ context.customer.firstName }}</p>
<p class="dropdown-email">{{ context.customer.email }}</p>
</div>
</div>
<div class="dropdown-arrow-up">
<img src="{{ asset('storefront/img/Icon-Arrow-Up.svg', '@HBCTheme') }}">
</div>
</div>
{% block layout_header_actions_account_widget_dropdown_links %}
<div class="account-menu-links">
{% sw_include '@Storefront/storefront/page/account/sidebar.html.twig' with {'headerWidget': true} %}
</div>
{% endblock %}
{% endif %}
{% endblock %}
{% block layout_header_actions_account_widget_dropdown_login %}
{% if not context.customer %}
<div class="dropdown-header account-menu-header">
<div class="dropdown-icon-login">
<div class="dropdown-icon">
<img src="{{ asset('storefront/img/Icon-Avatar-Blue-Desktop.svg', '@HBCTheme') }}">
</div>
<div class="dropdown-name-login">
<p>{{ "account.loginSubmit"|trans|sw_sanitize }}</p>
</div>
</div>
<div class="dropdown-arrow-up">
<img src="{{ asset('storefront/img/Icon-Arrow-Up.svg', '@HBCTheme') }}">
</div>
</div>
<div class="account-menu-login">
<a href="{{ path('frontend.account.login.page') }}"
title="{{ "account.orRegisterLink"|trans|striptags }}" class="btn-hbc-primary">
{{ "account.orRegisterLink"|trans|striptags }}</a>
</div>
{% endif %}
{% endblock %}
</div>
{% endblock %}