From 6067c00fe2a74a1a5af5dc80f84c445691e6f1a0 Mon Sep 17 00:00:00 2001
From: JackDandy <jackdandy@users.noreply.github.com>
Date: Thu, 9 Feb 2023 23:28:00 +0000
Subject: [PATCH] Change display show status in Change show header.

---
 gui/slick/interfaces/default/displayShow.tmpl |  5 ++---
 gui/slick/js/displayShow.js                   | 15 +++++++--------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/gui/slick/interfaces/default/displayShow.tmpl b/gui/slick/interfaces/default/displayShow.tmpl
index 45918dbf..8c1d4bb0 100644
--- a/gui/slick/interfaces/default/displayShow.tmpl
+++ b/gui/slick/interfaces/default/displayShow.tmpl
@@ -64,13 +64,12 @@
 .select2-results__group{color: #eee; background-color: rgb(51,51,51)}
 .select2-results__options .select2-results__option{color: #222; background-color: #ddd}
 .select2-results__options .select2-results__option .ended{color: #888}
-#select2-pickShow-results .select2-results__option .ended .label{background-color: #888; padding: 1px 4px; margin-right: 2px; line-height: 2; color: #ddd !important}
+.select2-container .ended .label{background-color: #888; padding: 1px 4px; margin-right: 2px; line-height: 2; color: #ddd !important}
+.select2-results__option--selected span{color:rgb(143, 21, 21) !important}
 .select2-container--default .select2-results > .select2-results__options{max-height: 300px}
 #select2-pickShow-results .select2-results__option,
 #select2-pickShow-results .select2-results__group{padding-top: 2px !important; padding-bottom:2px !important}
 #select2-pickShow-results .select2-results__option--highlighted.select2-results__option--selectable .ended{color:white}
-#select2-pickShow-results .select2-results__option--selected,
-#select2-pickShow-results .select2-results__option--selected span{color:rgb(143, 21, 21) !important}
 </style>
 <div class="bfr"><img src="$sbRoot/images/loading16${theme_suffix}.gif"><img src="$sbRoot/images/loading16-red.gif"><img src="$sbRoot/images/queued.png"><img src="$sbRoot/images/search16.png"><img src="$sbRoot/images/no16.png"><img src="$sbRoot/images/yes16.png"><img src="$sbRoot/images/down-success.png"><img src="$sbRoot/images/down-upgrade.png"></div>
 
diff --git a/gui/slick/js/displayShow.js b/gui/slick/js/displayShow.js
index 63460271..4dbc5b11 100644
--- a/gui/slick/js/displayShow.js
+++ b/gui/slick/js/displayShow.js
@@ -11,20 +11,19 @@
 $(document).ready(function() {
 
 	// handle the show selection dropbox
-	var select$ = $('#pickShow');
+	var select$ = $('#pickShow'), populateItem;
 	select$.change(function() {
 		var val = $(this).val();
 		if (0 !== val)
 			window.location.href = $.SickGear.Root + '/home/view-show?tvid_prodid=' + val;
 	});
-	select$.select2({
-		templateResult: function(data){
-			if (!data.element || !$(data.element).hasClass('ended')) {
-				return data.text;
-			}
-			return $('<span class="ended"><span class="label" title="">ended</span> <i>' + data.text + '</i></span>');
+	populateItem = function(data) {
+		if (!data.element || !$(data.element).hasClass('ended')) {
+			return data.text;
 		}
-	});
+		return $('<span class="ended"><span class="label" title="">ended</span> <i>' + data.text + '</i></span>');
+	}
+	select$.select2({templateResult: populateItem, templateSelection:populateItem});
 
 	$('#prevShow, #nextShow').on('click', function() {
 		var select$ = $('#pickShow'),