
<br>
<div class="container" style="margin-top: 3%;" >
<ul class="list-unstyled">
    <li class="media">
        <div class="media-body">

            <div class="container text-right">
                <button type="button" class="btn btn-outline-success" [routerLink]="['/calender']" style="float: left;">Calender</button>
                <input type="text" placeholder="Search" id="search">
                <button type="button" class="btn btn-primary" (click)="search()">Search</button>
                <button type="button" class="btn btn-outline-success" [routerLink]="['/add']">ADD</button>
                <button type="button" class="btn btn-outline-warning" (click)="getDiarys()">REFRESH</button>
                
            </div>
            <br>
            <table class="table">
                <thead>
                    <tr style="background-color: #8892ee">
                        <th scope="col-3">Number</th>
                        <th scope="col-3">Topic</th>
                        <th scope="col-3">Date</th>
                        <th scope="col-3">Function</th>

                    </tr>
                 <tbody>
                    <tr *ngFor="let diary of diarys; let i = index">
                        <td scope="row">{{ i+1 }}</td>
                        <td>{{ diary.topic }}</td>
                        <td>{{ diary.date }}</td>
                        <td>
                            <a [routerLink]="['/read', diary._id]" class="btn btn-outline-primary" >Read</a>
                            <a [routerLink]="['/edit', diary._id]" class="btn btn-outline-warning">Edit</a>
                            <button (click)="deleteDiary(diary._id,diary.topic)" class="btn btn-outline-danger">Delete</button>
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>
    </li>
</ul>
</div>