{%- from 'macros/helpers.jinja2' import theme_color -%}
<div class="onion-url">
  {#- we can't use lektor variables in our JS, so we pass in the button color as a data attribute -#}
  <a href="{{ envvars('ONION_URL') }}" class="onion-url-desktop onion-url-container" data-urlbg="{{ theme_color('BUTTON_COLOR').rstrip(';') }}">
    <i class="onion-url-lock"></i>
    <span class="onion-url-span">{{ envvars('ONION_URL') }}</span>
    <span class="onion-url-span-uncopied">{{ _('Copy the onion address') }}</span>
    <span class="onion-url-span-copied">{{ _('Copied!') }}</span>
  </a>
  <a href="{{ envvars('ONION_URL') }}" class="onion-url-mobile onion-url-container" data-urlbg="{{ theme_color('BUTTON_COLOR').rstrip(';') }}">
    <i class="onion-url-lock"></i>
    <span class="onion-url-span">{{ _('Visit the [Service Name] .onion site')|replace('[Service Name]', envvars_localized('SERVICE_NAME', alt)) }}</span>
    <span class="onion-url-span-uncopied">{{ _('Copy the onion address') }}</span>
    <span class="onion-url-span-copied">{{ _('Copied!') }}</span>
  </a>
</div>