<app-menu></app-menu>
<div class="container mt-4">
    <div class="d-flex justify-content-between mb-3">
        <!-- Button to Toggle to Blog Form -->
        <button *ngIf="!isShowForm" class="btn btn-primary" (click)="showForm()">New Blog</button>
        <!-- Button to Toggle to Blog List -->
        <button *ngIf="isShowForm" class="btn btn-secondary" (click)="showTable()">Back to List</button>
    </div>

    <!-- Blog Form -->
    <div *ngIf="isShowForm" class="mb-4">
        <form [formGroup]="blogForm" (ngSubmit)="saveBlog()">
            <div class="container">
                <button type="submit" class="btn btn-primary mx-2">{{ editing ? 'Update Blog' : 'Create Blog' }}</button>
                <button type="button" class="btn btn-secondary ml-2" (click)="resetForm()">Cancel</button>
            </div>

            <div class="form-group m-2 ">
                <label class="text-primary" for="title">Title</label>
                <input type="text" id="title" class="form-control" formControlName="title" placeholder="Enter blog title">
                <div *ngIf="blogForm?.get('title')?.invalid && blogForm.get('title')?.touched" class="text-danger">
                    Title is required.
                </div>
            </div>

            <div class="form-group m-2">
                <label class="text-primary" for="professors">Professors</label>
                <select id="professors" formControlName="professors" class="form-control" multiple>
                  <option *ngFor="let professor of allProfessors" [value]="professor.id">
                    {{ professor.firstName }}
                  </option>
                </select>
                <div *ngIf="blogForm.get('professors')?.invalid && blogForm.get('professors')?.touched" class="text-danger mt-1">
                  At least one professor must be selected.
                </div>
              </div>
              
              <div class="form-group m-2">
                <label class="text-primary" for="tags">Tags</label>
                <input type="text" id="tags" class="form-control" formControlName="tags" placeholder="Enter tags separated by commas">
                <div *ngIf="blogForm.get('tags')?.invalid && blogForm.get('tags')?.touched" class="text-danger mt-1">
                  Tags are required.
                </div>
              </div>
              
              <div class="form-group m-2">
                  <input type="checkbox" class="mx-2" id="posted" formControlName="posted">
                  <label class="text-primary" for="posted">Posted</label>
              </div>
              


            <div class="form-group m-2">
                <label class="text-primary m-1" for="content">Content</label>
                <angular-editor  [config]="editorConfig"  [placeholder]="'Enter text here...'" formControlName="content"></angular-editor>
                <div *ngIf="blogForm.get('content')?.invalid && blogForm.get('content')?.touched" class="text-danger mt-1">
                    Content is required.
                </div>
            </div>

            <div class="result-container mt-4">
                <h4 class="text-primary">Preview</h4>
                <div [innerHTML]="blogForm.get('content')?.value || ''"></div>
            </div>




        </form>
    </div>

<!-- Blog List -->
<div *ngIf="!isShowForm">
    <div *ngIf="blogs.length > 0">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Title</th>
                    <!-- <th>Content</th> -->
                    <th>Authors</th>
                    <th>Tags</th>
                    <th>Posted</th> <!-- New column for posted status -->
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let blog of blogs">
                    <td>{{ blog.title }}</td>
                    <!-- <td>{{ blog.content | slice:0:50 }}...</td> -->
                    <td>
                        <span *ngFor="let professor of blog.professors">{{ professor.firstName }}<br></span>
                    </td>
                    <td>
                        <span *ngFor="let tag of blog.tags">{{ tag }}<br></span>
                    </td>
                    <td>
                        <span *ngIf="blog.posted" class="text-success">&#10003;</span> <!-- Check mark for posted -->
                        <span *ngIf="!blog.posted" class="text-danger">&#10007;</span> <!-- Cross mark for not posted -->
                    </td>
                    <td>
                        <button class="btn btn-info btn-sm mr-2" (click)="editBlog(blog)"> <!-- Added margin-right for spacing -->
                            Edit
                        </button>
                        <button class="btn btn-danger btn-sm" (click)="deleteBlog(blog)">
                            Delete
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
        
    </div>
    <div *ngIf="blogs.length === 0" class="alert alert-info">
        No blogs available. Please create a new blog.
    </div>
</div>

</div>
