18F/identity-idp

<%= render ModalComponent.new(class: 'session-timeout-modal') do |c| %>
  <div class="display-flex flex-align-center flex-justify-center">
    <%= render AlertIconComponent.new(icon_name: :info_question) %>
  </div>
  <h2 class="margin-y-2 fs-20p text-normal text-center" id="<%= c.label_id %>">
    <%= t('headings.session_timeout_warning') %>
  </h2>
  <hr class="margin-bottom-4 border-info border-width-05" />
  <div class="margin-bottom-6">
    <p>
      <%= t(
            # i18n-tasks-use t('notices.timeout_warning.signed_in.message_html')
            # i18n-tasks-use t('notices.timeout_warning.partially_signed_in.message_html')
            'message_html',
            scope: modal_presenter.translation_scope,
            time_left_in_session_html: render(
              CountdownComponent.new(
                expiration: Time.zone.now,
                start_immediately: false,
              ),
            ),
          ) %>
    </p>
    <p class="usa-sr-only" id="<%= c.description_id %>" role="timer" aria-live="polite" aria-atomic="true">
      <%= t(
            # i18n-tasks-use t('notices.timeout_warning.signed_in.live_region_message_html')
            # i18n-tasks-use t('notices.timeout_warning.partially_signed_in.live_region_message_html')
            'live_region_message_html',
            scope: modal_presenter.translation_scope,
            time_left_in_session_html: render(
              CountdownComponent.new(
                expiration: Time.zone.now,
                update_interval: 30.seconds,
                start_immediately: false,
              ),
            ),
          ) %>
    </p>
  </div>
  <%= render ButtonComponent.new(
        type: :button,
        id: 'session-keepalive-btn',
        big: true,
        full_width: true,
        class: 'margin-bottom-2',
      ).with_content(
        # i18n-tasks-use t('notices.timeout_warning.signed_in.continue')
        # i18n-tasks-use t('notices.timeout_warning.partially_signed_in.continue')
        t('continue', scope: modal_presenter.translation_scope),
      ) %>
  <%= render ButtonComponent.new(
        url: logout_path,
        method: :delete,
        big: true,
        full_width: true,
        outline: true,
      ).with_content(
        # i18n-tasks-use t('notices.timeout_warning.signed_in.sign_out')
        # i18n-tasks-use t('notices.timeout_warning.partially_signed_in.sign_out')
        t('sign_out', scope: modal_presenter.translation_scope),
      ) %>
<% end %>