Fetch data from school journey

Partial journey to show how we might connect to their school systems.
Needs to be looked at a bit more indepth with Marten

app/assets/sass/application.scss

@@ -585,10 +585,39 @@ section.dfe {
 }
 
 .dfe-page-header {
-  background-color: #f0f8ff; /* Example: Light blue */
+  background-color: #f0f8ff; /*Light blue */
   padding: 20px;
 }
 
 .moj-sub-navigation .moj-sub-navigation__link[aria-current="true"] {
   border-bottom: 4px solid #1d70b8;
-}
+}
+
+/* Flexbox alignment for the radio button, image, and text */
+.govuk-radios__label {
+  display: flex;
+  align-items: flex-start; /* Align radio button to the top of the content */
+  gap: 15px; /* Space between the radio button and the content */
+  margin-bottom: 15px; /* Add spacing between radio button items */
+}
+
+/* Wrap image and text together */
+.radio-content {
+  display: flex;
+  // flex-direction: column; /* Stack image and text vertically */
+  gap: 5px; /* Space between image and text */
+}
+
+/* Ensure consistent size for logos */
+.radio-button-image {
+  width: 100px; /* Fixed width */
+  height: auto; /* Maintain aspect ratio */
+  object-fit: contain; /* Ensure logos are not stretched */
+}
+
+/* Optional: Adjust text for alignment */
+.radio-button-text {
+  font-size: 16px;
+  line-height: 1.2;
+  margin: 0; /* Remove any default margin */
+}

app/views/mvp3/_school/school-manage/batch-checking/school-mis/select-mis.html

@@ -0,0 +1,82 @@
+{% extends "../../../../../layouts/layout-dfe-schoolnav.html" %}
+{% set pageName="Select your school management information system" %}
+
+{% block content %}
+
+
+
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+    <h1 class="govuk-heading-l">{{pageName}}</h1>
+
+    <p class="govuk-body">
+      Connect to your school management information system with your login details</p>
+    <!-- <h2 class="govuk-heading-m">Connect to the ECE using your school system</h2>
+
+    <p class="govuk-body">Fetch data using API from your School MIS to perform a batch check </p>
+    </p>  <img src="/public/images/mis-logos/arbor-logo.png"  -->
+
+    <div class="govuk-form-group">
+      <fieldset class="govuk-fieldset">
+        <!-- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
+          <h2 class="govuk-fieldset"> Which system do you use </h2>
+        </legend> -->
+        <div class="govuk-radios__item">
+          <input class="govuk-radios__input" id="mis-arbor" name="mis" type="radio" value="arbor">
+          <label class="govuk-label govuk-radios__label" for="mis-arbor">
+            <div class="radio-content">
+              <img src="/public/images/mis-logos/arbor-logo.png" alt="Arbor logo" class="radio-button-image">
+              <span>  </span>
+            </div>
+          </label>
+        </div>
+
+        <div class="govuk-radios__item">
+          <input class="govuk-radios__input" id="mis-sims" name="mis" type="radio" value="sims">
+          <label class="govuk-label govuk-radios__label" for="mis-sims">
+            <div class="radio-content">
+              <img src="/public/images/mis-logos/sims.png" alt="Arbor logo" class="radio-button-image">
+              <span>   </span>
+            </div>
+          </label>
+        </div>
+
+        <div class="govuk-radios__item">
+          <input class="govuk-radios__input" id="mis-bromcom" name="mis" type="radio" value="bromcom">
+          <label class="govuk-label govuk-radios__label" for="mis-bromcom">
+            <div class="radio-content">
+              <img src="/public/images/mis-logos/Bromcom_block-logo-bg.png" alt="Bromcom logo" class="radio-button-image">
+              <span>   </span>
+            </div>
+
+          </label>
+        </div>
+        <div class="govuk-radios__item">
+          <input class="govuk-radios__input" id="mis-scholar" name="mis" type="radio" value="scholar">
+          <label class="govuk-label govuk-radios__label" for="mis-scholar">
+            <div class="radio-content">
+              <img src="/public/images/mis-logos/scholar-pack-MIS-logo.jpg" alt="Scholarpack logo" class="radio-button-image">
+              <span>   </span>
+            </div>
+
+          </label>
+        </div>
+        <div class="govuk-radios__item">
+          <input class="govuk-radios__input" id="mis-notlisted" name="whereDoYouLive" type="radio" value="not listed">
+          <label class="govuk-label govuk-radios__label" for="mis-notlisted">
+            Not listed
+          </label>
+        </div>
+    </div>
+    </fieldset>
+  </div>
+  </div>
+
+
+  {{ govukButton({
+    text: "Continue to authorise your school system",
+    classes: "govuk-button--primary",
+    href: 'sims-login.html'
+    }) }}
+
+  {% endblock %}

app/views/mvp3/_school/school-manage/batch-checking/school-mis/sims-login.html

@@ -0,0 +1,28 @@
+{% extends "../../../../../layouts/layout-dfe-schoolnav.html" %}
+{% set pageName="Unable to connect to your school system" %}
+
+{% block content %}
+
+<div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+        <h1 class="govuk-heading-l">{{pageName}}</h1>
+
+
+        <div class="govuk-error-summary" data-module="govuk-error-summary">
+            <div role="alert">
+                <h2 class="govuk-error-summary__title">
+                    There is a problem
+                </h2>
+                <div class="govuk-error-summary__body">
+                    <ul class="govuk-list govuk-error-summary__list">
+                        <li> <a href="/mvp3/_school/school-manage/batch-checking/upload">
+                                Please contact your school if you think this is incorrect or choose another option to
+                                complete a batch check.
+                            </a>
+                        </li>
+
+                    </ul>
+                </div>
+            </div>
+        </div>
+        {% endblock %}

app/views/mvp3/_school/school-manage/batch-checking/upload.html

@@ -22,11 +22,9 @@ <h2 class="govuk-heading-m">Connect to the ECE using your school system</h2>
     {{ govukButton({
     text: "Fetch data from your school system",
     classes: "govuk-button--primary",
-    href: '../batch-checking/imported-records'
+    href: '../batch-checking/school-mis/select-mis'
     }) }}
 
-
-
     <hr class="govuk-section-break govuk-section-break--m govuk-section-break">
 
     <h2 class="govuk-heading-m">Upload a Common File Transfer (CTF) from your school management information system</h2>
@@ -44,7 +42,6 @@ <h2 class="govuk-heading-m">Upload a Common File Transfer (CTF) from your school
     </ul>
 
 
-
     <h3 class="govuk-heading-s">Upload a XML file from your school management information system</h3>
 
     {% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
@@ -65,8 +62,7 @@ <h3 class="govuk-heading-s">Upload a XML file from your school management inform
     }) }}
 
 
-
-    <hr class="govuk-section-break govuk-section-break--l govuk-section-break">
+    <hr class="govuk-section-break govuk-section-break--m govuk-section-break">
 
     <h2 class="govuk-heading-m">Run a manual batch check</h2>