From 68cf150f54be396d4589e0e2bcaddea80b53bc8d Mon Sep 17 00:00:00 2001
From: Tracy Pearson <tracypearson@tracypearson.com>
Date: Mon, 20 Feb 2023 14:23:10 -0500
Subject: [PATCH] Got the episodes appearing in a dialog instead of below

---
 DvdCollection/Pages/Dvd/EpisodesPopup.razor   | 23 ++++++++++---------
 DvdCollection/Pages/Dvd/SeriesComponent.razor |  2 +-
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/DvdCollection/Pages/Dvd/EpisodesPopup.razor b/DvdCollection/Pages/Dvd/EpisodesPopup.razor
index 88dd7b8..ec4be95 100644
--- a/DvdCollection/Pages/Dvd/EpisodesPopup.razor
+++ b/DvdCollection/Pages/Dvd/EpisodesPopup.razor
@@ -1,23 +1,20 @@
 @using Dvd.Data
-@{
-    var showClass = IsVisible ? "d-block" : "d-none";
-}
 @if (Series != null)
 {
-    <div role="dialog">
-        <div class="toast-container p-6 @showClass" data-bs-autohide="true" data-bs-delay="5000">
-            <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
-                <div class="toast-header">
+    <div class="modal @ModalClass" tabindex="-1" style="display:@ModalDisplay">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
                     <select @onchange="ChangeSeason">
                         @foreach (var s in Seasons)
                         {
                             <option value=@s>@s</option>
                         }
                     </select>
-                    <button type="button" class="btn-close" aria-label="Close" @onclick="Close"></button>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @onclick="Close"></button>
                 </div>
 
-                <div class="toast-body">
+                <div class="modal-body">
                     @foreach (var episode in currentSeason.Episodes.Episode)
                     {
                         <EpisodeComponent Episode="@episode"></EpisodeComponent>
@@ -31,9 +28,10 @@
 @code {
     [Parameter]
     public DvdSeries Series { get; set; }
-    private bool IsVisible { get; set; } = false;
     private List<string> Seasons { get; set; } = new();
     private DvdSeason currentSeason { get; set; }
+    private string ModalClass = "";
+    private string ModalDisplay = "none";
 
     public void Close()
     {
@@ -41,7 +39,7 @@
     }
     protected override void OnParametersSet()
     {
-        IsVisible = Series != null;
+        ModalClass = "";
         if (Series != null)
         {
             currentSeason = Series.Seasons.Season[0];
@@ -50,6 +48,9 @@
             {
                 Seasons.Add(item.Season_name);
             }
+            ModalClass = "Show";
+            ModalDisplay = "block";
+            StateHasChanged();
         }
         base.OnParametersSet();
 
diff --git a/DvdCollection/Pages/Dvd/SeriesComponent.razor b/DvdCollection/Pages/Dvd/SeriesComponent.razor
index e558306..79dbc21 100644
--- a/DvdCollection/Pages/Dvd/SeriesComponent.razor
+++ b/DvdCollection/Pages/Dvd/SeriesComponent.razor
@@ -1,7 +1,7 @@
 @using DvdCollection.Pages.Dvd.Data;
 <div class="product-card">
     <div class="card">
-        <h3 class="card-top" alt="Card image cap">@Series.Name</h3>
+        <h3 class="card-top">@Series.Name</h3>
         <div class="card-body">
             <h5 class="card-title">@Series.Season_count seasons<a class="btn" @onclick="ShowEpisodes">Episodes</a></h5>
             <p class="card-text">@Series.Overview</p>