18F/identity-idp

<div class="border-y border-primary-light bg-primary-lightest padding-y-3 text-center">
  <div class="bg-personal-key padding-top-4 margin-y-2">
    <div class="personal-key-block">
      <% code_html = safe_join(
           code.split('-').map { |word| content_tag(:strong, word, class: 'personal-key-block__code') },
         ) %>
      <% if local_assigns[:code_example] %>
        <div class="usa-sr-only"><%= t('users.personal_key.accessible_labels.code_example') %></div>
        <div aria-hidden="true"><%= code_html %></div>
      <% else %>
        <%= code_html %>
      <% end %>
    </div>
  </div>
  <p class="margin-bottom-105">
    <% if local_assigns[:personal_key_generated_at].present? %>
      <%= t(
            'users.personal_key.generated_on_html',
            date_html: content_tag(
              :strong, render(TimeComponent.new(time: personal_key_generated_at))
            ),
          ) %>
    <% else %>
      <%= t(
            'users.personal_key.generated_on_html',
            date_html: content_tag(:strong, render(TimeComponent.new(time: Time.zone.today))),
          ) %>
    <% end %>
  </p>
  <% if show_save_buttons %>
    <%= render ClipboardButtonComponent.new(clipboard_text: code, unstyled: true) %>
    <%= render ClickObserverComponent.new(event_name: 'IdV: download personal key') do %>
      <%= render DownloadButtonComponent.new(
            file_data: code,
            file_name: 'personal_key.txt',
            unstyled: true,
            class: 'margin-x-2 display-inline-block',
          ).with_content(t('forms.personal_key.download')) %>
    <% end %>
    <%= render PrintButtonComponent.new(unstyled: true) %>
  <% end %>
</div>