<app-header></app-header>
<!-- <div class="container">
    <div class="row">
        <div class="col-sm-3 ">
           <div class="form-group col-sm-12 mb-3">
                <label>Upload Cover Image</label>
                <div class="mt-3" >
                    <img  class="img-fluid border" style="width: 256px; height: 400px;">
                </div>
                </div>

        </div>
        <div class="col-sm-9 p-5 bg-white">
            <h3 class="border-bottom">All Episode</h3>
            
            <button class="btn btn-primary" (click)="goToCreate()">+ New Part</button>
           
           <div class="tableofcontent" *ngFor="let story of stories">
  <div class="row">
    <div class="col-sm-9">
      <h5>{{ story.story_title }}</h5>
      <p class="small">Draft - {{ story.date }}</p>
    </div>
    <div class="col-sm-3">
      <button class="btn btn-success mr-3" (click)="goToEdit(story)">Edit</button>
      <button class="btn btn-danger">Delete</button>
    </div>
  </div>
</div>
            
        </div>
    </div>


</div> -->



<main class="container mx-auto px-0 lg:px-6">
      

        <!-- Profile Info -->
        <div class="mt-20 lg:mt-24 px-4 lg:px-8">
            <div class="flex justify-between items-start">
                <div></div>
                <div class="flex space-x-2">
                   
                    <button id="writeStoryBtn" (click)="goToCreate()"  class="pointer px-6 py-2 rounded-full font-medium bg-wattpad-secondary text-white hover:bg-[#009966] transition-colors">
                        {{t('ADD_NEW_EPISODE')}}
                    </button>
                </div>
            </div>

            <!-- Tab Contents -->
            <div class="py-4">
                <!-- Stories Tab -->
                <div id="stories-tab" class="tab-content active">
                    <div class="grid grid-cols-1 gap-4">
                        <!-- Story Card 1 - Published -->
                       <div class="pointer bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm hover:shadow-md transition-all relative" *ngFor="let story of stories">
                        <div class="actionbtn" *ngIf="isOwnProfile">
  <button 
    type="button" 
    class="deletebutton"    (click)="deleteStory(story.id)"
    >
    <i class="fas fa-trash text-gray-500 hover:text-red-500 transition-colors"></i>
  </button>
  <button 
                (click)="goToEdit(story)"
    type="button"
    class="editbutton"
    >
    <i class="fas fa-edit text-gray-500 hover:text-red-500 transition-colors"></i>
  </button>
</div>
  <div class="flex space-x-4">
    <div class="flex-1 min-w-0">
      <h3 class="font-bold text-lg lg:text-xl">{{ story.story_title }} 
        <span [ngClass]="{
          'story-status': true,
          'status-published bg-success': story.status == '1',
          'status-draft bg-warning': story.status == '0'
        }" *ngIf="isOwnProfile">
          {{ story.status == '0' ? 'Draft' : 'Published' }}
        </span>
      </h3>
      
      <div class="flex items-center mt-2 text-sm lg:text-base">
        <i class="fas fa-star text-yellow-400 mr-1"></i>
        <span>({{story.total_ratings}}) • {{story.views}} {{t('READS')}}</span>
      </div>
      <p class="text-sm lg:text-base mt-2 line-clamp-2" [innerHTML]="story.content"></p>
      <div class="flex justify-between items-center mt-3">
        <span class="text-xs lg:text-sm text-wattpad-light">{{t('UPDATED')}}: {{ getTimeAgo(getValidDate(story)) }} 
           </span>
        
        <!-- Only show Edit button for drafts -->
        <button *ngIf="story.status == '0'" 
                (click)="goToEdit(story)" 
                class="pointer text-xs lg:text-sm bg-wattpad-primary text-white px-3 py-1 rounded-full hover:bg-[#E5274B] transition-colors">
          {{t('EDIT')}}
        </button>
      </div>
    </div>
  </div>
  
  <!-- Show message for published stories without needing click -->
  <!-- <div *ngIf="story.status == '1'" class="text-sm text-green-700 bg-green-100 border border-green-300 rounded px-4 py-2 mb-3 mt-2">
    This story has already been published and cannot be edited.
  </div> -->
</div>

                        <!-- Add more story cards as needed -->
                    </div>
                </div>

            </div>
        </div>
    </main>