hunk.code_window:               <>
                   <EnvironmentStatusBadge status={environment.Status} />
                   {snapshotTime && (
                     <span
                       className="space-left small text-muted vertical-center"
                       title="Last snapshot time"
                     >
  
hunk.labels: keep keep keep keep replace keep keep
hunk.after_edit:                     className="small text-muted vertical-center gap-1"
  
hunk.file_path: app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentItem.tsx
hunk.type: replace
file: <div class="datatable access-viewer-datatable">
    <div class="toolBar vertical-center pl-0 pr-0">
      <div class="toolBarTitle vertical-center">
        <div>
          <div class="form-section-title mb-1">Access</div>
          <div class="vertical-center">
            <pr-icon icon="'info'" mode="'primary'" size="'sm'" class="vertical-center"></pr-icon>
            <span class="small text-muted"> Effective role for each environment will be displayed for the selected user </span>
          </div>
        </div>
      </div>
      <div class="searchBar vertical-center">
        <pr-icon icon="'search'" class="vertical-center"></pr-icon>
        <input
          type="text"
          class="searchInput ml-1"
          ng-model="$ctrl.state.textFilter"
          ng-change="$ctrl.onTextFilterChange()"
          placeholder="Search..."
          ng-model-options="{ debounce: 300 }"
        />
      </div>
    </div>
    <div class="table-responsive">
      <table class="table table-hover nowrap-cells">
        <thead>
          <tr>
            <th>
              <table-column-header
                col-title="'Environment'"
                can-sort="true"
                is-sorted="$ctrl.state.orderBy === 'EndpointName'"
                is-sorted-desc="$ctrl.state.orderBy === 'EndpointName' && $ctrl.state.reverseOrder"
                ng-click="$ctrl.changeOrderBy('EndpointName')"
              ></table-column-header>
            </th>
            <th>
              <table-column-header
                col-title="'Role'"
                can-sort="true"
                is-sorted="$ctrl.state.orderBy === 'RoleName'"
                is-sorted-desc="$ctrl.state.orderBy === 'RoleName' && $ctrl.state.reverseOrder"
                ng-click="$ctrl.changeOrderBy('RoleName')"
              ></table-column-header>
            </th>
            <th>Access origin</th>
          </tr>
        </thead>
        <tbody>
          <tr
            dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit)) track by $index"
          >
            <td>{{ item.EndpointName }}</td>
            <td>{{ item.RoleName }}</td>
            <td
              >{{ item.TeamName ? 'Team' : 'User' }} <code ng-if="item.TeamName">{{ item.TeamName }}</code> access defined on {{ item.AccessLocation }}
              <code ng-if="item.GroupName">{{ item.GroupName }}</code>
              <a ng-if="!item.GroupName && $ctrl.isAdmin" ui-sref="portainer.endpoints.endpoint.access({id: item.EndpointId})"><pr-icon icon="'users'"></pr-icon> Manage access </a>
              <a ng-if="item.GroupName && $ctrl.isAdmin" ui-sref="portainer.groups.group.access({id: item.GroupId})"><pr-icon icon="'users'"></pr-icon> Manage access </a>
            </td>
          </tr>
          <tr ng-if="!$ctrl.dataset">
            <td colspan="3" class="text-center text-muted">Select a user to show associated access and role</td>
          </tr>
          <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
            <td colspan="3" class="text-center text-muted">The selected user does not have access to any environment(s)</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="footer" ng-if="$ctrl.dataset">
      <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
      <div class="paginationControls">
        <form class="form-inline">
          <span class="limitSelector">
            <span style="margin-right: 5px"> Items per page </span>
            <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()">
              <option value="0">All</option>
              <option value="10">10</option>
              <option value="25">25</option>
              <option value="50">50</option>
              <option value="100">100</option>
            </select>
          </span>
          <dir-pagination-controls max-size="5"></dir-pagination-controls>
        </form>
      </div>
    </div>
  </div>
  