only apply shader if it's available for current area type

Also indicate in the UI if it's not available.

hub/mixins.py

@@ -231,6 +231,6 @@ def data(self, as_dict=False, mp_name=False):
     def shader(self):
         name = self.request.GET.get("shader")
         try:
-            return DataSet.objects.get(name=name)
+            return DataSet.objects.get(name=name, areas_available=self.area_type())
         except DataSet.DoesNotExist:
             return None

hub/templates/hub/explore.html

@@ -100,7 +100,7 @@ <h3 class="h6">${ filter.title }</h3>
                     <h2 class="h5 mt-4 mt-lg-5 mb-3 mb-lg-4 text-primary">Step 3: Shade constituencies (optional)</h2>
 
                     <div ref="shaderContainer" hidden>
-                        <div v-if="shader" class="bg-gray-100 border p-3 rounded">
+                        <div v-if="shader" class="border p-3 rounded" :class="{ 'bg-gray-100': shader.areas_available.includes(area_type), 'bg-red-100': !shader.areas_available.includes(area_type) }">
                             <div class="d-flex">
                                 <h3 class="h6 mb-0 me-auto">${ shader.title }</h3>
                                 <button @click="removeShader(shader.name)" type="button" class="btn-close p-0" aria-label="Remove shader"></button>