agency.template.html

<div *ngIf="agency" class="agency-container">
  <h1>{{ agency.name }}</h1>

  <div class="loading-dialog" *ngIf="isLoading">
    <p>Loading Results...</p>
    <img alt="United States of America Flag" width="44" height="30" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIwLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICB2aWV3Qm94PSIwIDAgMzAwIDIwNy41IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDAgMjA3LjU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAuc3Qwe2ZpbGw6I0YxNUQ1RDt9CiAgLnN0MXtmaWxsOiNGRkZGRkY7fQogIC5zdDJ7ZmlsbDojMzM4REM5O30KPC9zdHlsZT4KCjxkZWZzPgogIDxtYXNrIGlkPSJmbGFnTWFzayIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIC0zMDApIj4KICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJ0cmFuc2xhdGUiIGZyb209Ii0zMDAgMCIgdG89IjAgMCIgZHVyPSIzcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogICAgICA8dXNlIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhsaW5rOmhyZWY9IiN3YXZlIi8+CiAgICA8L2c+CiAgPC9tYXNrPgogIDxnIGlkPSJ3YXZlIj4KICAgIDxwYXRoIGZpbGw9IndoaXRlIiBkPSJNMzAwLDIwMS43YzAsMCwyMiwxMS44LDUwLDBjMjcuOC0xMS43LDUwLDAsNTAsMHMyNi42LDEyLDUwLDBzNTAsMCw1MCwwczIyLjksMTEuNyw1MC4xLDBjMjcuMi0xMS43LDUwLDAsNTAsMAogICAgICBWNS43YzAsMC0yOC4yLTExLjctNTAsMHMtNTAsMC01MCwwcy0yNS0xMi43LTUwLDBjLTIzLjQsMTEuOS01MCwwLTUwLDBzLTIzLjEtMTIuMi01MC4xLDBjLTI5LjUsMTMuMy01MCwwLTUwLDBsMCwwCiAgICAgIGMtMS4zLTAuNS0yOC42LTExLjQtNDkuOSwwYy0yMS44LDExLjctNTAsMC01MCwwcy0yNS0xMi43LTUwLDBjLTIzLjQsMTEuOS01MCwwLTUwLDBTNzYuOS02LjUsNTAsNS43QzIwLjUsMTksMCw1LjcsMCw1Ljd2MTk2CiAgICAgIGMwLDAsMjIsMTEuOCw1MCwwYzI3LjgtMTEuNyw1MCwwLDUwLDBzMjYuNiwxMiw1MCwwczUwLDAsNTAsMHMyMi45LDExLjcsNTAuMSwwQzI3Ni43LDE5MC4yLDI5OS4zLDIwMS4zLDMwMCwyMDEuN0wzMDAsMjAxLjd6Ii8+CiAgPC9nPgogIDxnIGlkPSJmbGFnIj4KICAgIDxyZWN0IGNsYXNzPSJzdDAiIHdpZHRoPSIzMDAiIGhlaWdodD0iMjA3LjUiLz4KICAgIDxyZWN0IHg9IjEzNC45IiB5PSIzMC40IiBjbGFzcz0ic3QxIiB3aWR0aD0iMTY1LjEiIGhlaWdodD0iMjcuOSIvPgogICAgPHJlY3QgeD0iMTM0LjkiIHk9IjkwLjciIGNsYXNzPSJzdDEiIHdpZHRoPSIxNjUuMSIgaGVpZ2h0PSIyNy45Ii8+CiAgICA8cmVjdCB5PSIxNDkuNSIgY2xhc3M9InN0MSIgd2lkdGg9IjMwMCIgaGVpZ2h0PSIyNy45Ii8+CiAgICA8cmVjdCBjbGFzcz0ic3QyIiB3aWR0aD0iMTM0LjkiIGhlaWdodD0iMTE4LjUiLz4KICA8L2c+CjwvZGVmcz4KICA8dXNlIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhsaW5rOmhyZWY9IiNmbGFnIiBtYXNrPSJ1cmwoI2ZsYWdNYXNrKSIvPgo8L3N2Zz4K" />
  </div>

  <div *ngIf="!isLoading">
    <div *ngIf="hasRepos" class="repos-container">
      <p class="repos-count">
        {{ allRepos.length }} Featured {{ "Projects" | pluralize : allRepos.length }}
      </p>
      <ul
          class="repos-list usa-unstyled-list"
          infinite-scroll
          [infiniteScrollDistance]="2"
          [infiniteScrollThrottle]="500"
          (scrolled)="onScroll()">
        <li *ngFor="let repo of repos" class="repo">

          <span *ngIf="repo.permissions.usageType === 'openSource' || repo.permissions.usageType === 'governmentWideReuse'">
            <a routerLink="/explore-code/agencies/{{agency.id}}/repos/{{repo.name}}">
              <div class="card card--focusable">
                <h3 class="repo-name">{{ repo.name }}</h3>
                <p class="repo-description">
                  {{ repo.description | truncate : 200 }}
                </p>
                <ul class="usa-unstyled-list repo-features">
                  <li *ngFor="let language of repo.languages" class="language">
                    <i class="icon devicons devicons-{{language | lowercase | languageIcon }}"></i>
                    <span>{{ language }}</span>
                  </li>
                  <li>
                    <i class="icon fa fa-code"></i>
                    <span *ngIf="repo.permissions.usageType === 'openSource'">Open Source</span>
                    <span *ngIf="repo.permissions.usageType === 'governmentWideReuse'">Government-Wide Reuse</span>
                  </li>
                </ul>
              </div>
            </a>
          </span>
        </li>
      </ul>
    </div>

    <div *ngIf="!hasRepos">
      <p>
        No repositories found.
      </p>
    </div>
  </div>
</div>