- sort_value = @sort
- sort_title = packages_sort_option_title(sort_value)

- if @packages.any?
  .d-flex.justify-content-end
    .dropdown.inline.gl-mt-3.gl-mb-3.package-sort-dropdown
      .btn-group{ role: 'group' }
        .btn-group{ role: 'group' }
          %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static', 'qa-selector': 'sort-dropdown-button' }, class: 'btn btn-default' }
            = sort_title
            = icon('chevron-down')
          %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
            %li
              = sortable_item(sort_title_created_date,      package_sort_path(sort: sort_value_recently_created),  sort_title)
              = sortable_item(sort_title_name,              package_sort_path(sort: sort_value_name_desc),         sort_title)
              = sortable_item(sort_title_project_name,      package_sort_path(sort: sort_value_project_name_desc), sort_title)
              = sortable_item(sort_title_version,           package_sort_path(sort: sort_value_version_desc),      sort_title)
              = sortable_item(sort_title_type,              package_sort_path(sort: sort_value_type_desc),         sort_title)
        = packages_sort_direction_button(sort_value)

  .table-holder
    .gl-responsive-table-row.table-row-header.bg-secondary-50.px-2.border-top{ role: 'row' }
      .table-section.section-30{ role: 'rowheader' }
        = _('Name')
      .table-section.section-20{ role: 'rowheader' }
        = _('Project')
      .table-section.section-20{ role: 'rowheader' }
        = _('Version')
      .table-section.section-10{ role: 'rowheader' }
        = _('Type')
      .table-section.section-20{ role: 'rowheader' }
        = _('Created')
    - @packages.each do |package|
      .gl-responsive-table-row{ data: { 'qa-selector': 'package-row' } }
        .table-section.section-30
          .table-mobile-header{ role: "rowheader" }= _("Name")
          .table-mobile-content.flex-truncate-parent
            = link_to package.name, project_package_path(package.project, package), class: 'flex-truncate-child'
        .table-section.section-20
          .table-mobile-header{ role: "rowheader" }= _("Project")
          .table-mobile-content
            = link_to_project(package.project)
        .table-section.section-20
          .table-mobile-header{ role: "rowheader" }= _("Version")
          .table-mobile-content
            = package.version
        .table-section.section-10
          .table-mobile-header{ role: "rowheader" }= _("Type")
          .table-mobile-content
            = package.package_type
        .table-section.section-20
          .table-mobile-header{ role: "rowheader" }= _("Created")
          .table-mobile-content
            = time_ago_with_tooltip(package.created_at)
    = paginate @packages, theme: "gitlab"
- else
  .row.empty-state
    .col-12
      = render 'shared/packages/no_packages'