{#
/**
* @file
* Template for a Secret element.
*
* Available variables:
* - value: The secret value.
*
* @ingroup themeable
*/
#}

{% set id = 'secret-id-' ~ random() %}

{{ attach_library('apigee_edge/apigee_edge.secret') }}
<div class="secret field__item" id={{ id }}>
  <div class="secret__value">{{ value }}</div>
  <div class="secret__value__hidden" aria-hidden="true">••••••••••••••••</div>
  <br/>
  <button class="secret__toggle" title="{{ 'Toggle key visibility'|t }}" aria-controls="{{ id }}">
    <a class="secret__toggle__show" href="#"><i class="fas fa-eye secret__toggle__show"></i></a>
    <a class="secret__toggle__hide" href="#"><i class="fas fa-eye-slash secret__toggle__hide"></i></a>
  </button>

  <div class="secret__copy">
    <span class="badge badge-light">{{ "Copied"|t }}</span>
    <button class="secret__copy" data-value="{{ value }}" title="{{ "Click to copy"|t }}">
      <i class="fas fa-paste"></i>
    </button>
  </div>

</div>
