
<div class="topSection">
    <button id="loginButton">Autorizēties</button>
    <button id="registerButton">Reģistrēties</button>
</div>

<h1>Lasītava</h1>
    
<div class="middleSection">
    <div class="selectContent">
        <button *ngFor="let letter of letters" (click)="toggleComponent(letter)">{{ letter }}</button>
        <input id="search" type="text" placeholder="Meklēt...">
    </div>

    <div class="contentContainer">
        <thead>
            <tr>
              <th>ID</th>
              <th>Title</th>
              <th>Year</th>
            </tr>
          </thead>
        <div *ngIf="activeComponent === 'A'">
            <table>
                <tbody>
                  <tr *ngFor="let book of booksA">
                    <td>{{ book.id }}</td>
                    <td>{{ book.title }}</td>
                    <td>{{ book.year }}</td>
                  </tr>
                </tbody>
              </table>
          </div>
    
          <div *ngIf="activeComponent === 'Ā'">
            <table>
            <tbody>
              <tr *ngFor="let book of booksAA">
                <td>{{ book.id }}</td>
                <td>{{ book.title }}</td>
                <td>{{ book.year }}</td>
              </tr>
            </tbody>
          </table>

          
          </div>
    </div>


