- page_title s_("UsageQuota|Usage")

= render_if_exists 'namespaces/free_user_cap/projects/usage_quota_limitations_banner'

= render Pajamas::AlertComponent.new(title: _('Repository usage recalculation started'),
  variant: :info,
  alert_options: { class: 'js-recalculation-started-alert gl-mt-4 gl-mb-5 gl-display-none' }) do |c|
  = c.body do
    = _('To view usage, refresh this page in a few minutes.')

%h1.page-title.gl-font-size-h-display
  = s_('UsageQuota|Usage Quotas')

.row
  .col-sm-12
    = s_('UsageQuota|Usage of project resources across the %{strong_start}%{project_name}%{strong_end} project').html_safe % { strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe, project_name: @project.name } + '.'
    %a{ href: help_page_path('user/usage_quotas.md'), target: '_blank', rel: 'noopener noreferrer' }
      = s_('UsageQuota|Learn more about usage quotas') + '.'

= gl_tabs_nav do
  = gl_tab_link_to '#storage-quota-tab', item_active: true do
    = s_('UsageQuota|Storage')

.tab-content
  .tab-pane.active#storage-quota-tab
    #js-project-storage-count-app{ data: { project_path: @project.full_path } }