From 7baca4341e5e1a98270a937e02d4e3c218e25189 Mon Sep 17 00:00:00 2001
From: jonathanbataire <jonathanbataire@gmail.com>
Date: Tue, 4 Jun 2024 18:05:25 +0300
Subject: [PATCH 1/5] :hammer: forms

---
 src/liquid/app/form_switch.html               |  30 ++-
 src/liquid/app/fragment_edit.html             |   2 +-
 src/liquid/app/view.html                      |   5 +-
 src/liquid/components/actions.html            |   2 +-
 src/liquid/components/contact_type_dob.html   |  32 ++-
 .../components/contact_type_property.html     |   9 +-
 src/liquid/components/filter_tag.html         |   3 +-
 src/liquid/components/move_result.html        |  63 +++---
 src/liquid/components/search_input.html       |   7 +-
 src/liquid/components/search_results.html     |  29 +--
 src/liquid/place/bulk_create_form.html        | 198 ++++++++----------
 src/liquid/place/create_form.html             |  16 +-
 src/liquid/place/list_lazy.html               |   6 +-
 src/liquid/place/move_form.html               |  19 +-
 src/public/css/custom-bootstrap.min.css       |   2 +-
 src/public/css/datepicker.min.css             |   1 +
 src/public/css/styles.css                     |   2 +-
 src/public/icons/calendar.svg                 |  11 +
 src/public/scripts/datepicker.min.js          |   1 +
 src/scss/_buttons.scss                        |  95 ++++++---
 src/scss/_directives.scss                     |  17 ++
 src/scss/_input-forms.scss                    | 125 +++++++++--
 src/scss/_mixins.scss                         |  13 ++
 src/scss/_spinner.scss                        |  85 ++++----
 src/scss/styles.scss                          |   3 +
 25 files changed, 465 insertions(+), 311 deletions(-)
 create mode 100644 src/public/css/datepicker.min.css
 create mode 100644 src/public/icons/calendar.svg
 create mode 100644 src/public/scripts/datepicker.min.js

diff --git a/src/liquid/app/form_switch.html b/src/liquid/app/form_switch.html
index f4656a26..87f51983 100644
--- a/src/liquid/app/form_switch.html
+++ b/src/liquid/app/form_switch.html
@@ -1,26 +1,22 @@
 <div id="place_form_parent">
   {% capture header_caption %}
-    {% if op == "bulk" %} Bulk Load from CSV
-    {% elsif op == "replace"%} Replace Existing
-    {% elsif op == "move"%} Move 
-    {% elsif op == "edit" %} Edit
-    {% else %} New
-    {% endif %}
+  {% if op == "bulk" %} Bulk Load from CSV
+  {% elsif op == "replace"%} Replace Existing
+  {% elsif op == "move"%} Move
+  {% elsif op == "edit" %} Edit
+  {% else %} New
+  {% endif %}
   {% endcapture %}
-  
-  <section class="hero is-small">
-    <div class="hero-body">
-      <p class="title">
-        {{header_caption}} {{contactType.contact_friendly | default: contactType.friendly }}
-      </p>
-    </div>
-  </section>
+
+  <h3 class="form-title">
+    {{header_caption}} {{contactType.contact_friendly | default: contactType.friendly }}
+  </h3>
 
   {% if op == "bulk" %}
-    {% include "place/bulk_create_form.html" %}
+  {% include "place/bulk_create_form.html" %}
   {% elsif op == "move" %}
-    {% include "place/move_form.html" %}
+  {% include "place/move_form.html" %}
   {% else %}
-    {% include "place/create_form.html" %}
+  {% include "place/create_form.html" %}
   {% endif %}
 </div>
\ No newline at end of file
diff --git a/src/liquid/app/fragment_edit.html b/src/liquid/app/fragment_edit.html
index 302b0cf7..e0183f64 100644
--- a/src/liquid/app/fragment_edit.html
+++ b/src/liquid/app/fragment_edit.html
@@ -1,3 +1,3 @@
-<div id="place_form_parent" class="tile is-6 is-child pt-3">
+<div id="place_form_parent">
     {% include "place/create_form.html" %}
 </div>
\ No newline at end of file
diff --git a/src/liquid/app/view.html b/src/liquid/app/view.html
index 48ed2e3f..d62d60db 100644
--- a/src/liquid/app/view.html
+++ b/src/liquid/app/view.html
@@ -5,12 +5,13 @@
   <title>CHT User Management Tool</title>
   <script src="/public/scripts/htmx.min.js"></script>
   <script src="/public/scripts/sse.js"></script>
-  <script src="/public/scripts/bulma-calendar.min.js"></script>
   <script src="/public/scripts/jquery-3.7.1.slim.min.js"></script>
   <script src="/public/scripts/bootstrap.min.js"></script>
+  <script src="/public/scripts/datepicker.min.js"></script>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="/public/css/custom-bootstrap.min.css" />
   <link rel="stylesheet" href="/public/css/styles.css" />
+  <link rel="stylesheet" href="/public/css/datepicker.min.css" />
 </head>
 
 <body>
@@ -18,7 +19,7 @@
     {% include "app/header.html" %}
     <div class="content">
       <div id="app">
-        <div id="workflow-content" class="container tile is-parent">
+        <div id="workflow-content" class="container">
           {% if view == "list" %}
           {% include "app/fragment_home.html" %}
           {% else %}
diff --git a/src/liquid/components/actions.html b/src/liquid/components/actions.html
index 7801c299..b87f656c 100644
--- a/src/liquid/components/actions.html
+++ b/src/liquid/components/actions.html
@@ -16,7 +16,7 @@
   <div class="bottom" id="action_buttons_{{include.contactType.name}}">
     {% if directiveModel.validationErrorCount > 0 or directiveModel.totalCount == 0 %}
     <div data-toggle="tooltip" title="Fix invalid users">
-      <button class="clear-btn disabled" hx-post="/app/apply-changes?type={{ include.contactType.name }}" hx-swap="none"
+      <button class="clear-btn" hx-post="/app/apply-changes?type={{ include.contactType.name }}" hx-swap="none"
         disabled>
         <img src="/public/icons/upload-users.svg"> Upload All
       </button>
diff --git a/src/liquid/components/contact_type_dob.html b/src/liquid/components/contact_type_dob.html
index 55ef06c3..d56da803 100644
--- a/src/liquid/components/contact_type_dob.html
+++ b/src/liquid/components/contact_type_dob.html
@@ -1,14 +1,10 @@
-<div class="control">
-  <input 
-    name="{{ include.prop_name }}" 
-    {% if include.isInYears %} type="text" {%else%} type="date" {%endif%}
-    class="input"
+<div>
+  <input
+    {% if include.isInYears %} type="number" min="0" max="120" {%else%} type="date-picker" readonly {%endif%}
+    name="{{ include.prop_name }}"
     {% if data[include.prop_name] %} value="{{ data[include.prop_name] }}" {% endif %} 
   />
-</div>
-
-<div class="field">
-  <div class="control">
+  <div class="check-box">
     <input 
       type="checkbox" 
       name="option_dob_unknown" 
@@ -18,4 +14,20 @@
     />
     <label>Date of birth unknown</label>
   </div>
-</div>
\ No newline at end of file
+</div>
+
+<script>
+  /* vanillajs-datepicker */
+  var datePickerInput = document.querySelector('input[type="date-picker"]');
+  if (datePickerInput){
+    var datePicker = new Datepicker(datePickerInput, {
+      autohide: true,
+      clearButton: true,
+      enableOnReadonly: true,
+      format: 'yyyy-mm-dd',
+      maxDate: new Date(),
+      minDate: '1920',
+      showOnFocus: true
+    });
+  }
+</script>
\ No newline at end of file
diff --git a/src/liquid/components/contact_type_property.html b/src/liquid/components/contact_type_property.html
index eb421d2f..7ac964c2 100644
--- a/src/liquid/components/contact_type_property.html
+++ b/src/liquid/components/contact_type_property.html
@@ -1,9 +1,9 @@
 {% if include.prop.type != 'generated' %}
   {% capture prop_name %}{{ include.prefix }}{{include.prop.property_name}}{% endcapture %}
 
-  <div id="div_{{ include.prefix }}{{include.prop.property_name}}" class="field">
-    <label class="label">
-      {% if data['option_dob_unknown'] %}
+  <div id="div_{{ include.prefix }}{{include.prop.property_name}}">
+    <label>
+      {% if data['option_dob_unknown'] and include.prop.property_name == 'date_of_birth' %}
         Age in Years
       {%else%}
         {{include.prop.friendly_name}}
@@ -20,7 +20,7 @@
           data=data
       %}
     {% else %}
-      <div class="control">
+      <div>
         {% if include.prop.type == 'select_one' or include.prop.type == 'select_multiple' %}
           {%
             include "components/contact_type_select.html"
@@ -32,7 +32,6 @@
           <input
             name="{{ prop_name }}"
             type="{% if include.prop.type == 'dob' %}date{% else %}text{% endif %}"
-            class="input"
             {% if false and include.prop.type == 'regex' %} pattern="{{ include.prop.parameter }}" {% endif %}
             {% if data[prop_name] %} value="{{ data[prop_name] }}" {% endif %}
           />
diff --git a/src/liquid/components/filter_tag.html b/src/liquid/components/filter_tag.html
index 50590d27..a7cf5dc4 100644
--- a/src/liquid/components/filter_tag.html
+++ b/src/liquid/components/filter_tag.html
@@ -5,8 +5,7 @@
 
 {%elsif include.count == 0 %}
 <button class="badge tag 
-  {% if not directiveModel.filter %} {{ include.class }} {%endif %}
-   disabled" disabled>
+  {% if not directiveModel.filter %} {{ include.class }} {%endif %}" disabled>
   {{ include.count }} {{ include.filterName }}
 </button>
 {% else %}
diff --git a/src/liquid/components/move_result.html b/src/liquid/components/move_result.html
index 9fb71866..7adced7e 100644
--- a/src/liquid/components/move_result.html
+++ b/src/liquid/components/move_result.html
@@ -1,34 +1,31 @@
-<nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
-  <ul>
-    <li><span class="tag is-warning" style="margin: 0 10px;">Current</span></li>
-    {% for lineage in fromLineage %}
-    {% if lineage %}
-      <li><a href="https://{{ session.authInfo.domain }}/#/contacts/{{ lineage.id}}">{{ lineage.name }}</a></li>
-    {% endif %}
-    {% endfor %}
-  </ul>
-  <ul>
-    <li><span class="tag is-success" style="margin: 0 10px;">After</span></li>
-    {% for lineage in toLineage %}
-    {% if lineage %}
-      <li><a href="https://{{ session.authInfo.domain }}/#/contacts/{{ lineage.id}}">{{ lineage.name }}</a></li>
-    {% endif %}
-    {% endfor %}
-    <li><span style="margin: 0 10px;">{{ fromLineage.last.name }}</span></li>
-  </ul>
-</nav>
+<div class="directive">
+  <a href="/" class="close-btn"><img src="/public/icons/delete-all.svg" alt="close"></a>
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb">
+      <li class="tag badge warning-bg">Current</li>
+      {% for lineage in fromLineage %}
+      {% if lineage %}
+      <li class="breadcrumb-item"><a href="https://{{ session.authInfo.domain }}/#/contacts/{{ lineage.id}}">{{
+          lineage.name }}</a></li>
+      {% endif %}
+      {% endfor %}
+    </ol>
+    <ol class="breadcrumb">
+      <li class="tag badge success-bg">After</li>
+      {% for lineage in toLineage %}
+      {% if lineage %}
+      <li class="breadcrumb-item"><a href="https://{{ session.authInfo.domain }}/#/contacts/{{ lineage.id}}">{{
+          lineage.name }}</a></li>
+      {% endif %}
+      {% endfor %}
+      <li class="breadcrumb-item" active>{{ fromLineage.last.name }}</li>
+    </ol>
+  </nav>
 
-<section class="hero {% if isError %}is-danger{% else %}is-info{% endif %}">
-  <div class="hero-body">
-    <div>
-      <button
-        class="button is-right"
-        style="float: right;"
-        onclick="navigator.clipboard.writeText(`{{ command }}`);"
-      >
-        <span class="material-symbols-outlined">content_copy</span>
-      </button>
-      {{ command }}
-    </div>
-  </div>
-</section>
\ No newline at end of file
+  <pre class="{% if isError %}error-bg{% endif %}">
+    <button class="clear-btn" onclick="navigator.clipboard.writeText(`{{ command }}`);">
+      <span>copy content</span>
+    </button>
+    {{ command }}
+  </pre>
+</div>
diff --git a/src/liquid/components/search_input.html b/src/liquid/components/search_input.html
index 2ac5a7e7..435cda4f 100644
--- a/src/liquid/components/search_input.html
+++ b/src/liquid/components/search_input.html
@@ -1,15 +1,14 @@
 {% capture property_name %}{{ include.prefix | default: 'place_' }}{{ include.hierarchy.property_name }}{% endcapture %}
-<div class="field">
+<div>
   <label class="label">
     {{ include.hierarchy.friendly_name }}
     {% if include.hierarchy.required %}*{% endif %}
   </label>
-  <div class="control">
+  <div>
     <input
       id="{{ property_name }}"
       name="{{ property_name }}"
       type="search"
-      class="input"
       hx-post="/search?place_id={{place.id}}&type={{ include.type }}&op={{op}}&level={{ include.hierarchy.level }}&prefix={{ include.prefix }}"
       hx-vals=""
       placeholder="start typing to see suggestions"
@@ -19,6 +18,6 @@
       {% if include.data[property_name] %}value="{{ include.data[property_name] }}" {% endif %}
       hx-encoding="application/x-www-form-urlencoded"
     />
-    <div id="search_results_{{ property_name }}" class="control"></div>
+    <div id="search_results_{{ property_name }}"></div>
   </div>
 </div>
\ No newline at end of file
diff --git a/src/liquid/components/search_results.html b/src/liquid/components/search_results.html
index 23bfda88..45fc5192 100644
--- a/src/liquid/components/search_results.html
+++ b/src/liquid/components/search_results.html
@@ -1,19 +1,12 @@
-<div class="dropdown is-active">
-  <div class="dropdown-menu" id="dropdown-menu" role="menu">
-    <div class="dropdown-content">
-      {% for searchResult in searchResults %}
-        <a
-          class="dropdown-item"
-          hx-post="/search/select?place_id={{place.id}}&result_name={{searchResult.name}}&level={{level}}&op={{op}}&prefix={{ prefix }}"
-          hx-target="#place_form_parent"
-          hx-encoding="application/x-www-form-urlencoded"
-        >
-          {% if searchResult.type == 'local' %}
-            <span class="material-symbols-outlined">cloud_off</span>
-          {% endif %}
-          {{searchResult.name}}
-        </a>
-      {% endfor %}
-    </div>
-  </div>
+<div class="autocomplete-dropdown" id="dropdown-menu" role="menu">
+  {% for searchResult in searchResults %}
+  <a class="dropdown-item"
+    hx-post="/search/select?place_id={{place.id}}&result_name={{searchResult.name}}&level={{level}}&op={{op}}&prefix={{ prefix }}"
+    hx-target="#place_form_parent" hx-encoding="application/x-www-form-urlencoded">
+    {% if searchResult.type == 'local' %}
+    <span>cloud_off</span>
+    {% endif %}
+    {{searchResult.name}}
+  </a>
+  {% endfor %}
 </div>
\ No newline at end of file
diff --git a/src/liquid/place/bulk_create_form.html b/src/liquid/place/bulk_create_form.html
index 105842cf..3aa54521 100644
--- a/src/liquid/place/bulk_create_form.html
+++ b/src/liquid/place/bulk_create_form.html
@@ -1,120 +1,94 @@
-<section class="section is-small">
-  <form 
-    id="form_place_create" 
-    hx-encoding='multipart/form-data' 
-    autocomplete="off"
-    hx-post="/place?op=bulk&type={{contactType.name}}"
-    hx-disabled-elt="button#place_create_submit, a#cancel"
-    hx-indicator="#place_create_submit_progress"
-    hx-target="this" 
-    hx-swap="outerHTML" 
-  >
-      <input name="place_type" value="{{contactType.name}}" hidden />
+<form id="form_place_create" class="data-form" hx-encoding='multipart/form-data' autocomplete="off"
+  hx-post="/place?op=bulk&type={{contactType.name}}" hx-disabled-elt="button#place_create_submit, a#cancel"
+  hx-indicator="#upload-spinner" hx-target="this" hx-swap="outerHTML">
+  <input name="place_type" value="{{contactType.name}}" hidden />
 
-      {% if errors %}
-        <div class="notification is-danger">
-          {{errors.message}}
-        </div>
-      {% endif %}
-      
-      <div id="bulk-upload-file" class="file has-name is-centered">
-        <label class="file-label">
-          <input class="file-input" type="file" name="resume">
-          <span class="file-cta">
-            <span class="file-icon">
-              <i class="fas fa-upload"></i>
-            </span>
-            <span class="file-label">
-              Choose a file…
-            </span>
-          </span>
-          <span class="file-name">
-            No file uploaded
-          </span>
-        </label>
-      </div><br/>
-      <div class="field is-grouped is-grouped-centered">
-        <div class="control">
-            <button id="place_create_submit" class="button is-link">Add</button>
-        </div>
-        <div class="control">
-            <a href="/" id="cancel" class="button">Cancel</a>
-        </div>
-      </div>
-      <div>
-        <progress id="place_create_submit_progress" class="progress is-small is-primary htmx-indicator" max="100"></progress>
-      </div>
+  {% if errors %}
+  <div class="error-bg white-text error-message">
+    {{errors.message}}
+  </div>
+  {% endif %}
 
-      <div class="tile box">
-        <table class="table is-fullwidth is-striped is-hoverable">
-          <thead>
-            <tr>
-              <th>Expected Column</th>
-              <th>Required</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>{{ contactType.replacement_property.friendly_name }}</td>
-              <td>false</td>
-              <td>Name of a <i>{{ contactType.friendly }} to replace</i> (leave blank to create new)</td>
-            </tr>
+  <div class="file-input" id="bulk-upload-file">
+    <input type="file" name="resume">
+  </div>
 
-            {% for row in contactType.hierarchy %}
-            <tr>
-              <td>{{ row.friendly_name }}</td>
-              <td>{{ row.required }}</td>
-              <td>Name of place {{ row.level }} above in hierarchy</td>
-            </tr>
-            {% endfor %}
+  <div>
+    <button id="place_create_submit" class="btn">
+      Add <span id="upload-spinner" class="spinner-sm btn-spinner"></span>
+    </button>
+    <a href="/" id="cancel" class="clear-btn">Cancel</a>
+  </div>
 
-            {% for row in contactType.place_properties %}
-              {% if row.type != 'generated' %}
-              <tr>
-                <td>{{ row.friendly_name }}</td>
-                <td>{{ row.required }}</td>
-                <td>Property on place</td>
-              </tr>
-              {% endif %}
-            {% endfor %}
+  <div class="table-container">
+    <table class="info-table">
+      <thead>
+        <tr>
+          <th>Expected Column</th>
+          <th>Required</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td data-label="Expected Column">{{ contactType.replacement_property.friendly_name }}</td>
+          <td data-label="Required">false</td>
+          <td data-label="Description">Name of a <i>{{ contactType.friendly }} to replace</i> (leave blank to create new)</td>
+        </tr>
 
-            {% for row in contactType.contact_properties %}
-              {% if row.type != 'generated' %}
-              <tr>
-                <td>{{ row.friendly_name }}</td>
-                <td>{{ row.required }}</td>
-                <td>Property on primary contact</td>
-              </tr>
-              {% endif %}
-            {% endfor %}
+        {% for row in contactType.hierarchy %}
+        <tr>
+          <td data-label="Expected Column">{{ row.friendly_name }}</td>
+          <td data-label="Required">{{ row.required }}</td>
+          <td data-label="Description">Name of place {{ row.level }} above in hierarchy</td>
+        </tr>
+        {% endfor %}
 
-            {% if contactType.user_role.size > 1 %}
-            <tr>
-              <td>{{ userRoleProperty.friendly_name }}</td>
-              <td>{{ userRoleProperty.required }}</td>
-              <td>Role of the user. Separate multiple roles with a <i>space</i>. Allowed roles are <i>{{ contactType.user_role | join: ', ' }}
-              </td>
-            </tr>
-            {% endif %}
-          </tbody>
-        </table>
-      </div>
+        {% for row in contactType.place_properties %}
+        {% if row.type != 'generated' %}
+        <tr>
+          <td data-label="Expected Column">{{ row.friendly_name }}</td>
+          <td data-label="Required">{{ row.required }}</td>
+          <td data-label="Description">Property on place</td>
+        </tr>
+        {% endif %}
+        {% endfor %}
 
-      <div class="field">
-        <div class="control">
-            Don't have a template? <a href="/files/template/{{contactType.name}}" download="{{contactType.name}}.tmpl.csv">Download Template</a>
-        </div>
-      </div>
+        {% for row in contactType.contact_properties %}
+        {% if row.type != 'generated' %}
+        <tr>
+          <td data-label="Expected Column">{{ row.friendly_name }}</td>
+          <td data-label="Required">{{ row.required }}</td>
+          <td data-label="Description">Property on primary contact</td>
+        </tr>
+        {% endif %}
+        {% endfor %}
 
-      <script>
-        const fileInput = document.querySelector('#bulk-upload-file input[type=file]');
-        fileInput.onchange = () => {
-          if (fileInput.files.length > 0) {
-            const fileName = document.querySelector('#bulk-upload-file .file-name');
-            fileName.textContent = fileInput.files[0].name;
-          }
-        }
-      </script>
-  </form>
-</section>
\ No newline at end of file
+        {% if contactType.user_role.size > 1 %}
+        <tr>
+          <td data-label="Expected Column">{{ userRoleProperty.friendly_name }}</td>
+          <td data-label="Required">{{ userRoleProperty.required }}</td>
+          <td data-label="Description">Role of the user. Separate multiple roles with a <i>space</i>. Allowed roles are <i>{{
+              contactType.user_role | join: ', ' }}
+          </td>
+        </tr>
+        {% endif %}
+      </tbody>
+    </table>
+  </div>
+
+  <div>
+    Don't have a template? <a href="/files/template/{{contactType.name}}"
+    download="{{contactType.name}}.tmpl.csv">Download Template</a>
+  </div>
+</form>
+
+<script>
+  const fileInput = document.querySelector('#bulk-upload-file input[type=file]');
+  fileInput.onchange = () => {
+    if (fileInput.files.length > 0) {
+      const fileName = document.querySelector('#bulk-upload-file .file-name');
+      fileName.textContent = fileInput.files[0].name;
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/src/liquid/place/create_form.html b/src/liquid/place/create_form.html
index 71a9bcad..ae46c272 100644
--- a/src/liquid/place/create_form.html
+++ b/src/liquid/place/create_form.html
@@ -1,9 +1,9 @@
-<form
+<form class="data-form"
 id="form_place_create" autocomplete="off"
 {% if backend %} hx-post="{{backend}}" {%else%} hx-post="/place?op=new&type={{contactType.name}}" {%endif%}
 hx-target="this" hx-swap="outerHTML">
   <input name="place_type" value="{{contactType.name}}" hidden />
-  <section class="section is-small">
+  <section>
     {% for hierarchy in hierarchy %}
       {% if hierarchy.level != 0 or op == 'replace' or place.hierarchyProperties.replacement %}
         {%
@@ -22,7 +22,7 @@
       %}
     {% endfor %}
   </section>
-  <section class="section is-small">
+  <section class="section-box">
     {% for prop in contactType.contact_properties %}
       {%
         include "components/contact_type_property.html" prefix="contact_" prop=prop place_type=contactType.name
@@ -31,17 +31,15 @@
   </section>
 
   {% if contactType.user_role.size > 1 %}
-  <section class="section is-small">
+  <section class="section-box">
     {%
       include "components/contact_type_property.html" prefix="user_" prop=userRoleProperty
     %}
   </section>
   {% endif %}
 
-  <div class=" field is-grouped is-grouped-right">
-    <div class="control">
-      <button id="place_create_submit" class="button is-link">Save</button>
-      <a href="/" class="button">Cancel</a>
-    </div>
+  <div>
+    <button id="place_create_submit" class="btn">Save</button>
+    <a href="/" class="clear-btn" class="button">Cancel</a>
   </div>
 </form>
diff --git a/src/liquid/place/list_lazy.html b/src/liquid/place/list_lazy.html
index 8a39c1ae..fd49b853 100644
--- a/src/liquid/place/list_lazy.html
+++ b/src/liquid/place/list_lazy.html
@@ -10,7 +10,11 @@ <h2>{{contactType.friendly}}</h2>
         {% include "components/table_header.html" contactType=contactType %}
       </table>
     </div>
-    <div id="spinner" class="spinner"></div>
+
+    <div class="center spinner-container">
+      <span id="upload-spinner" class="spinner"></span>
+    </div>
+
     {% endfor %}
   </div>
 </div>
\ No newline at end of file
diff --git a/src/liquid/place/move_form.html b/src/liquid/place/move_form.html
index 496658aa..ce479dc9 100644
--- a/src/liquid/place/move_form.html
+++ b/src/liquid/place/move_form.html
@@ -1,4 +1,5 @@
 <form
+  class="data-form"
   id="form_place_move" 
   autocomplete="off"
   {% if backend %} hx-post="{{backend}}" {%else%} hx-post="/move" {%endif%}
@@ -6,15 +7,15 @@
   hx-swap="outerHTML"
 >
   {% if error %}
-    <div class="notification is-danger" style="margin: 0;">
+    <div class="error-bg white-text error-message">
       {{ error }}
     </div>
   {% endif %}
 
   <input name="place_type" value="{{contactType.name}}" hidden />
 
-  <section class="section is-small">
-    <h1 class="subtitle">From</h1>
+  <section>
+    <h1>From</h1>
     {% for hierarchy in fromHierarchy %}
       {%
         include "components/search_input.html"
@@ -26,8 +27,8 @@ <h1 class="subtitle">From</h1>
       %}
     {% endfor %}
   </section>
-  <section class="section is-small">
-    <h1 class="subtitle">To</h1>
+  <section>
+    <h1>To</h1>
     {% for hierarchy in toHierarchy %}
       {%
         include "components/search_input.html"
@@ -39,10 +40,8 @@ <h1 class="subtitle">To</h1>
       %}
     {% endfor %}
   </section>
-  <div class="field is-grouped is-grouped-right">
-    <div class="control">
-      <button id="place_create_submit" class="button is-link">Move</button>
-      <a href="/" class="button">Cancel</a>
-    </div>
+  <div>
+    <button id="place_create_submit" class="btn">Move</button>
+    <a href="/" class="clear-btn">Cancel</a>
   </div>
 </form>
diff --git a/src/public/css/custom-bootstrap.min.css b/src/public/css/custom-bootstrap.min.css
index 1fa45850..487d4517 100644
--- a/src/public/css/custom-bootstrap.min.css
+++ b/src/public/css/custom-bootstrap.min.css
@@ -4,4 +4,4 @@
  * Bootstrap v3.4.1 (https://getbootstrap.com/)
  * Copyright 2011-2019 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */.badge{display:inline-block;min-width:10px;padding:3px 7px;font-size:12px;font-weight:bold;line-height:1;color:#ffffff;text-align:center;white-space:nowrap;vertical-align:middle;background-color:#777777;border-radius:10px}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.btn-xs .badge,.btn-group-xs>.btn .badge{top:0;padding:1px 5px}a.badge:hover,a.badge:focus{color:#ffffff;text-decoration:none;cursor:pointer}.list-group-item.active>.badge,.nav-pills>.active>a>.badge{color:#337ab7;background-color:#ffffff}.list-group-item>.badge{float:right}.list-group-item>.badge+.badge{margin-right:5px}.nav-pills>li>a>.badge{margin-left:3px}.tooltip{position:absolute;z-index:1070;display:block;font-family:inherit;font-style:normal;font-weight:400;line-height:1.42857143;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:12px;filter:alpha(opacity=0);opacity:0}.tooltip.in{filter:alpha(opacity=90);opacity:0.9}.tooltip.top{padding:5px 0;margin-top:-3px}.tooltip.right{padding:0 5px;margin-left:3px}.tooltip.bottom{padding:5px 0;margin-top:3px}.tooltip.left{padding:0 5px;margin-left:-3px}.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#000000}.tooltip.top-left .tooltip-arrow{right:5px;bottom:0;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000000}.tooltip.top-right .tooltip-arrow{bottom:0;left:5px;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000000}.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#000000}.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#000000}.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#000000}.tooltip.bottom-left .tooltip-arrow{top:0;right:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000000}.tooltip.bottom-right .tooltip-arrow{top:0;left:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000000}.tooltip-inner{max-width:200px;padding:3px 8px;color:#ffffff;text-align:center;background-color:#000000;border-radius:4px}.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}
+ *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */.badge{display:inline-block;min-width:10px;padding:3px 7px;font-size:12px;font-weight:bold;line-height:1;color:#ffffff;text-align:center;white-space:nowrap;vertical-align:middle;background-color:#777777;border-radius:10px}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.btn-xs .badge,.btn-group-xs>.btn .badge{top:0;padding:1px 5px}a.badge:hover,a.badge:focus{color:#ffffff;text-decoration:none;cursor:pointer}.list-group-item.active>.badge,.nav-pills>.active>a>.badge{color:#337ab7;background-color:#ffffff}.list-group-item>.badge{float:right}.list-group-item>.badge+.badge{margin-right:5px}.nav-pills>li>a>.badge{margin-left:3px}.tooltip{position:absolute;z-index:1070;display:block;font-family:inherit;font-style:normal;font-weight:400;line-height:1.42857143;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:12px;filter:alpha(opacity=0);opacity:0}.tooltip.in{filter:alpha(opacity=90);opacity:0.9}.tooltip.top{padding:5px 0;margin-top:-3px}.tooltip.right{padding:0 5px;margin-left:3px}.tooltip.bottom{padding:5px 0;margin-top:3px}.tooltip.left{padding:0 5px;margin-left:-3px}.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#000000}.tooltip.top-left .tooltip-arrow{right:5px;bottom:0;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000000}.tooltip.top-right .tooltip-arrow{bottom:0;left:5px;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000000}.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#000000}.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#000000}.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#000000}.tooltip.bottom-left .tooltip-arrow{top:0;right:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000000}.tooltip.bottom-right .tooltip-arrow{top:0;left:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000000}.tooltip-inner{max-width:200px;padding:3px 8px;color:#ffffff;text-align:center;background-color:#000000;border-radius:4px}.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.breadcrumb{padding:8px 15px;margin-bottom:20px;list-style:none;background-color:#f5f5f5;border-radius:4px}.breadcrumb>li{display:inline-block}.breadcrumb>li+li:before{padding:0 5px;color:inherit;content:">"}.breadcrumb>.active{color:#777777}
diff --git a/src/public/css/datepicker.min.css b/src/public/css/datepicker.min.css
new file mode 100644
index 00000000..0187fdd1
--- /dev/null
+++ b/src/public/css/datepicker.min.css
@@ -0,0 +1 @@
+.datepicker{width:-moz-min-content;width:min-content}.datepicker:not(.active){display:none}.datepicker-dropdown{padding-top:4px;position:absolute;z-index:20}.datepicker-dropdown.datepicker-orient-top{padding-bottom:4px;padding-top:0}.datepicker-picker{background-color:#fff;border-radius:4px;display:flex;flex-direction:column}.datepicker-dropdown .datepicker-picker{box-shadow:0 2px 3px hsla(0,0%,4%,.1),0 0 0 1px hsla(0,0%,4%,.1)}.datepicker-main{flex:auto;padding:2px}.datepicker-footer{background-color:#f5f5f5;box-shadow:inset 0 1px 1px hsla(0,0%,4%,.1)}.datepicker-title{background-color:#f5f5f5;box-shadow:inset 0 -1px 1px hsla(0,0%,4%,.1);font-weight:none;padding:.375rem .75rem;text-align:center}.datepicker-controls{display:flex}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{align-items:center;background-color:#fff;border:1px solid #dcdcdc;border-radius:4px;box-shadow:none;color:#363636;cursor:pointer;display:inline-flex;font-size:1rem;height:2.25em;justify-content:center;line-height:1.5;margin:0;padding:calc(.375em - 1px) .75em;position:relative;text-align:center;vertical-align:top;white-space:nowrap}.datepicker-controls .button:active,.datepicker-controls .button:focus{outline:none}.datepicker-controls .button:hover{border-color:#b8b8b8;color:#363636}.datepicker-controls .button:focus{border-color:#3273dc;color:#363636}.datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em rgba(50,115,220,.25)}.datepicker-controls .button:active{border-color:#474747;color:#363636}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:none}.datepicker-header .datepicker-controls .button:hover{background-color:#f9f9f9}.datepicker-header .datepicker-controls .button:active{background-color:#f2f2f2}.datepicker-footer .datepicker-controls .button{border-radius:2px;flex:auto;font-size:.75rem;margin:calc(.375rem - 1px) .375rem}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-button,.datepicker-controls .prev-button{flex:0 0 14.2857142857%;padding-left:.375rem;padding-right:.375rem}.datepicker-controls .next-button.disabled,.datepicker-controls .prev-button.disabled{visibility:hidden}.datepicker-grid,.datepicker-view{display:flex}.datepicker-view{align-items:stretch;width:15.75rem}.datepicker-grid{flex:auto;flex-wrap:wrap}.datepicker .days{display:flex;flex:auto;flex-direction:column}.datepicker .days-of-week{display:flex}.datepicker .week-numbers{display:flex;flex:0 0 9.6774193548%;flex-direction:column}.datepicker .weeks{align-items:stretch;display:flex;flex:auto;flex-direction:column}.datepicker span{-webkit-touch-callout:none;align-items:center;border-radius:4px;cursor:default;display:flex;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.datepicker .dow{font-size:.875rem;font-weight:none;height:1.5rem}.datepicker .week{color:#b8b8b8;flex:auto;font-size:.75rem}.datepicker .days .dow,.datepicker-cell{flex-basis:14.2857142857%}.datepicker-cell{height:2.25rem}.datepicker-cell:not(.day){flex-basis:25%;height:4.5rem}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#e9e9e9}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#3273dc;color:#fff;font-weight:none}.datepicker-cell.disabled{color:#dcdcdc}.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#7a7a7a}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){background-color:#f5f5f5;border-radius:0}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#efefef}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#e9e9e9}.datepicker-cell.today:not(.selected){background-color:#00d1b2}.datepicker-cell.today:not(.selected):not(.disabled){color:#fff}.datepicker-cell.today.focused:not(.selected){background-color:#00ccad}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b8b8b8;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#b3b3b3}.datepicker-cell.range-start:not(.range-end){border-radius:4px 0 0 4px}.datepicker-cell.range-end:not(.range-start){border-radius:0 4px 4px 0}.datepicker-cell.range{background-color:#dcdcdc;border-radius:0}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d7d7d7}.datepicker-cell.range.disabled{color:#c6c6c6}.datepicker-cell.range.focused{background-color:#d1d1d1}.datepicker-input.in-edit{border-color:#276bda}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em rgba(39,107,218,.2)}
\ No newline at end of file
diff --git a/src/public/css/styles.css b/src/public/css/styles.css
index 7070fb77..dbc41a1d 100644
--- a/src/public/css/styles.css
+++ b/src/public/css/styles.css
@@ -1 +1 @@
-@font-face{font-family:"Noto";src:url(/public/fonts/NotoSans-Regular.ttf) format("truetype");font-weight:normal}.theme,body{background-color:#fff;color:#333;font-family:Noto, sans-serif}.btn,.login-btn,.clear-btn{box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);background-color:#337ab7;border-color:#2e6da4;border:1px solid transparent;color:white;border-radius:4px;font-size:1em;font-family:inherit;cursor:pointer;text-decoration:none}.btn.disabled,.disabled.login-btn,.disabled.clear-btn{background-color:#f1f1f1;pointer-events:auto;cursor:not-allowed;text-shadow:none}.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;font-size:0.9em;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);z-index:1}.dropdown-content a{color:#333;padding:12px 16px;text-decoration:none;display:block}.dropdown-content a:hover{background-color:#f1f1f1}.dropdown-button{width:fit-content}.dropdown-button:hover .dropdown-content{display:block}.login-btn{width:100%;margin:30px auto;display:block;height:40px;box-shadow:0px 4px 10px 0px rgba(0,0,0,0.5)}.login-btn:hover{background-color:#2e6da4}.clear-btn{font-size:0.9em;background-color:white;align-items:center;border:1.9px solid #ccc;color:#333;margin:auto 5px;box-shadow:none;display:inline-flex;height:40px;padding:0 10px}.clear-btn:hover{background-color:#f1f1f1}.clear-btn img{margin-right:4px}a.clear-btn{height:38px}.tag.clear-btn{height:20px;color:#007AC0;border-color:#007AC0}.badge.tag{border:none;border-radius:4px;height:20px;font-weight:normal;font-size:.8125rem;cursor:pointer}.badge.status{display:inline-flex;height:12px;border-radius:4px;font-weight:normal;font-size:.8125rem;justify-self:center;align-items:center}.badge.tag.disabled{pointer-events:auto;cursor:not-allowed}form{margin:0 auto;padding:25px;border-radius:12px;background-color:white;box-shadow:0 10px 20px 0 rgba(0,0,0,0.1)}form input,form select{font-size:1rem;border:1px solid #ccc;border-radius:4px;padding:10px;width:100%;box-sizing:border-box}form input:focus,form select:focus{border:none;outline-style:solid;outline-color:#007AC0;box-shadow:0 0 4px 2px #007AC0;outline-width:2px}form select{appearance:none;background-color:white;cursor:pointer;background-image:url("/public/images/dropdown.svg");background-repeat:no-repeat;background-position:right 0.7rem top 50%;background-size:1.25em auto}#form_authenticate{font-size:1.25rem;width:550px}@media (max-width: 1023px){#form_authenticate{width:80%}}#form_authenticate input,#form_authenticate form select,form #form_authenticate select{margin:5px auto}#form_authenticate input input[type="text"],#form_authenticate form select input[type="text"],form #form_authenticate select input[type="text"],#form_authenticate input form select[type="text"],form #form_authenticate input select[type="text"],#form_authenticate form select select[type="text"],form #form_authenticate select select[type="text"]{margin-bottom:20px}#form_authenticate select{margin:5px auto 20px auto}.navbar{background-color:white;display:flex;position:fixed;top:0;left:0;width:100%;height:3.5em;align-items:center;box-sizing:border-box;padding:10px 15px;z-index:1000}@media (max-width: 1023px){.navbar{padding:10px 10px}}.navbar .navbar-branding{font-size:1.25rem;font-weight:bold;margin-right:10px}.navbar .navbar-branding img{width:100%;height:1.5em}@media (max-width: 1023px){.navbar #logo.navbar-branding{display:none}}.navbar #title.navbar-branding{display:none}@media (max-width: 1023px){.navbar #title.navbar-branding{display:block}}.navbar ul{list-style-type:none;margin-left:auto;padding:0;display:flex;cursor:pointer}.navbar a{text-decoration:none}.navbar .dropdown{position:relative}@media (min-width: 1023px){.navbar .dropdown:hover .dropdown-menu{display:block;visibility:visible}}.navbar .dropdown ul{width:200px}@media (max-width: 1023px){.navbar .dropdown ul{width:300px}}.navbar .dropdown img{margin:auto 8px;width:20px;height:20px}.navbar .dropdown #dropdown-btn{display:flex;align-items:center}@media (max-width: 1023px){.navbar .dropdown #dropdown-btn{display:none}}.navbar .dropdown-menu{box-shadow:0 10px 20px 0 rgba(0,0,0,0.1);position:absolute;border-radius:4px;top:100%;right:0;padding:10px;background-color:#fff;height:fit-content;border:1px solid #ccc;display:none;visibility:hidden}@media (max-width: 1023px){.navbar .dropdown-menu{top:150%}}.navbar .dropdown-menu li{color:#333;display:flex;align-items:center;height:2em}.navbar .dropdown-menu img{margin:auto 6px auto 0px}.navbar .hamburger-icon{display:none}@media (max-width: 1023px){.navbar .hamburger-icon{width:28px;height:28px;display:flex;padding:0px;flex-direction:column;justify-content:space-around;align-items:center;cursor:pointer}.navbar .hamburger-icon span{width:100%;height:2px;background-color:#333;transition:0.2s}}.navbar .open span:nth-child(1){transform:rotate(45deg) translate(6.5px, 6px)}.navbar .open span:nth-child(2){opacity:0}.navbar .open span:nth-child(3){transform:rotate(-45deg) translate(6.5px, -6px)}.navbar .active-dropdown{display:block;visibility:visible}.spinner{display:block;margin:1em auto;font-size:10px;position:relative;border:0.4em solid rgba(119,119,119,0.2);border-top-color:rgba(119,119,119,0.4);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:loader .9s infinite linear;animation:loader .9s infinite linear;border-radius:50%;width:3em;height:3em}@-webkit-keyframes loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.table-container{overflow-x:auto;display:flex;margin:0.5em 5px 1em 5px;width:auto;border-radius:8px}.table-container table{border-collapse:collapse;border-spacing:0;width:100%;max-width:100%}.table-container table a{color:#337ab7;text-decoration:none}.table-container table a:hover,.table-container table a:focus{color:#23527c;text-decoration:underline}.table-container table td{font-size:0.95em}.table-container table td:last-child{position:sticky;position:-webkit-sticky;right:0}.table-container table th,.table-container table td{text-align:left;padding:15px}.table-container table th{font-size:.875rem;background-color:rgba(220,220,220,0.6);border-bottom:1px solid #ccc}.table-container table th a{cursor:pointer}.table-container table th a:hover,.table-container table th a:focus{text-decoration:none}.table-container table th a:first-child{padding-right:3px}.table-container table th.header-actions{text-align:right}.table-container table tr:nth-child(even){background-color:#f2f2f2}.table-container table .action-link{cursor:pointer;z-index:-1}.table-container table .action-link:hover,.table-container table .action-link:focus{filter:brightness(0);text-decoration:none}@media (max-width: 600px){.table-container{box-shadow:none}.table-container table{table-layout:fixed}.table-container table thead{display:none}.table-container table tr:nth-child(even){background-color:white}.table-container table td{border-left:1px solid #ddd;border-right:1px solid #ddd;background-color:#f2f2f2;display:block;text-align:right;border-top:none}.table-container table td .empty{padding:15px}.table-container table td::before{content:attr(data-label);float:left}.table-container table td:last-child{margin-bottom:1em;border-bottom:1px solid #ddd;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.table-container table td:first-child{border-top:1px solid #ddd;border-top-left-radius:4px;border-top-right-radius:4px}}.pagination{display:inline-flex;font-size:.875rem;width:100%;justify-content:center;margin:0 auto 70px auto}.pagination button{background-color:white;border:none;width:40px;font-size:1.25rem;cursor:pointer}.pagination a{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;color:black;float:left;margin:auto 1px;padding:8px 16px;text-decoration:none;border-radius:4px;border:1px solid #ccc;cursor:pointer;display:none}.pagination a:nth-child(-n+4),.pagination a.collapse{display:block}.pagination a:nth-last-child(-n+3){display:block}.pagination a.active{background-color:#007AC0;display:block;color:white;border:1px solid #007AC0}.pagination a:hover:not(.active){background-color:#f1f1f1}.pagination .pager-control{display:inline-flex;justify-content:center;align-items:center;margin-left:20px;height:inherit;font-size:.875rem;float:right}.pagination .pager-control span{margin-right:5px}.pagination .pager-control select{font-size:.875rem;background-color:white;border:1px solid #ccc;border-radius:4px;padding:auto;height:inherit}.topnav{overflow-x:auto;background-color:white;max-height:10em;display:flex;border-bottom:1px solid #ccc;position:sticky;position:-webkit-sticky;top:3.4em;z-index:900}.topnav a{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;font-size:1rem;cursor:pointer;float:left;display:block;color:#545454;text-align:center;padding:14px 17px;text-decoration:none}@media (max-width: 1023px){.topnav a{font-size:.875rem}}.topnav a:hover{color:black}.topnav .active{border-bottom:3px solid #007AC0;color:black}.topnav .active span{background-color:#007AC0}.nav-content h2{margin-left:5px}.directive{background-color:#f5f5f5;margin:1em auto;min-height:3em;padding:10px 25px}.directive h3{margin:5px auto}@media (max-width: 1023px){.directive{font-size:0.9em;padding:10px}}.directive .prompt-save a{float:right;top:20%}.directive.get-started{box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);background-color:#f5f5f5;font-size:1.25rem;padding-bottom:40px;text-align:center;border-radius:#ccc;margin:7em 7em;display:flex;flex-direction:column;justify-content:center;align-items:center}.directive.get-started p{max-width:40%}.directive.get-started span{font-size:1.75rem}.directive.get-started .directive-dropdown{display:flex}@media (max-width: 1023px){.directive.get-started{margin:7em 5px;padding:10px 10px 30px 10px}.directive.get-started p{width:90%;max-width:none}.directive.get-started button{font-size:1rem}}.hidden-tag-container{margin-top:10px;font-size:0.95em}.login-page{background-color:#F8F8F8}.container{margin:0 auto;padding-top:0.4em}.border{border:1px solid blue}.actions{display:flex;justify-content:flex-end;padding:10px}.actions .top,.actions .bottom{display:flex;align-items:center;width:fit-content}@media (max-width: 600px){.actions{padding:0;flex-direction:column;width:100%}.actions button,.actions a{width:14em;margin:2px}.actions .top{order:1;width:inherit;justify-content:center;margin:5px auto 3px auto}.actions .bottom{order:2;width:inherit;justify-content:center}}.content{padding-top:3em;margin:auto;width:98%}.center{margin:1em}.hidden{display:none}.active{display:block}img{vertical-align:middle}.error{color:#da4548;text-align:center;display:none;font-size:1rem}.error-text{color:#f14668}.success-text{color:#48c78e}.staging-text{color:#007AC0}.warning-text{color:#ffe08a}.error-bg{background-color:#f14668}.success-bg{background-color:#48c78e}.staging-bg{background-color:#007AC0}.warning-bg{background-color:#ffe08a;color:#333}.striped-bg{background:repeating-linear-gradient(135deg, #606dbc, #606dbc 5px, #465298 5px, #465298 10px)}.logo{width:60%;margin:30px auto 40px auto;display:block}.login-branding{width:400px;margin:0 auto}@media (max-width: 1023px){.login-branding{width:85%}}.login-branding p{text-align:center;font-size:1.5rem;font-weight:bold}progress{width:100%;height:15px;margin:10px auto;background-color:white;border-radius:10px;overflow:hidden}progress::-webkit-progress-bar{background-color:white;border-radius:10px}progress::-moz-progress-bar{background-color:#007AC0}progress::-webkit-progress-value{background-color:#007AC0;border-radius:10px;transition:width 1s ease}
+@font-face{font-family:"Noto";src:url(/public/fonts/NotoSans-Regular.ttf) format("truetype");font-weight:normal}.theme,body{background-color:#fff;color:#333;font-family:Noto, sans-serif}.btn,.clear-btn,.login-btn{background-color:#337ab7;border-color:#2e6da4;border:1px solid transparent;color:white;border-radius:4px;font-size:1em;font-family:inherit;cursor:pointer;text-decoration:none}.btn span.spinner,.clear-btn span.spinner,.login-btn span.spinner,.btn span.spinner-sm,.clear-btn span.spinner-sm,.login-btn span.spinner-sm{margin:1px 5px;float:inline-end}.btn:hover,.clear-btn:hover,.login-btn:hover,.btn:focus,.clear-btn:focus,.login-btn:focus{background-color:#2e6da4}.btn:disabled,.clear-btn:disabled,.login-btn:disabled{background-color:#2e6da4;color:#e8e8e8;pointer-events:auto;cursor:not-allowed;text-shadow:none}.clear-btn{background-color:white;align-items:center;border:1.9px solid #ccc;color:#333;margin:auto 5px;box-shadow:none;display:inline-flex;height:40px;padding:0 10px}.clear-btn:hover,.clear-btn:focus,.clear-btn:disabled{background-color:#f1f1f1}.clear-btn:disabled{color:#707070}.clear-btn img{margin-right:4px}a.clear-btn{height:38px;font-size:0.9em}a.clear-btn.htmx-request{background-color:#f1f1f1;pointer-events:none}.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;font-size:0.9em;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);z-index:1}.dropdown-content a{color:#333;padding:12px 16px;text-decoration:none;display:block}.dropdown-content a:hover{background-color:#f1f1f1}.dropdown-button{width:fit-content}.dropdown-button:hover .dropdown-content{display:block}.login-btn{width:100%;margin:30px auto;display:block;height:40px;box-shadow:0px 4px 10px 0px rgba(0,0,0,0.5)}.data-form button.btn,.data-form button.clear-btn,.data-form button.login-btn,.data-form button.clear-btn,.data-form a.clear-btn{height:40px;width:120px;margin:auto 5px}.data-form button.clear-btn{justify-content:center}.data-form a.clear-btn{justify-content:center;width:95px;margin:auto 5px}.tag.clear-btn{height:20px;color:#007AC0;border-color:#007AC0}.badge.tag{border:none;border-radius:4px;height:20px;font-weight:normal;font-size:.8125rem;cursor:pointer}.badge.status{display:inline-flex;height:12px;border-radius:4px;font-weight:normal;font-size:.8125rem;justify-self:center;align-items:center}.badge.tag:disabled{pointer-events:auto;cursor:not-allowed}.breadcrumb li.tag{height:15px;padding:5px}form{margin:0 auto;padding:2em;border-radius:12px;background-color:white;box-shadow:0 4px 8px 0 rgba(0,0,0,0.2)}form input,form select{font-size:1rem;border:1px solid #ccc;border-radius:4px;padding:10px;width:100%;box-sizing:border-box}form input:focus,form select:focus{border:none;outline-style:solid;outline-color:#007AC0;box-shadow:0 0 4px 2px #007AC0;outline-width:2px}form input[type="date-picker"],form select[type="date-picker"]{background-image:url("/public/icons/calendar.svg");background-repeat:no-repeat;background-position:right 0.7rem top 50%;background-size:1.25em auto;cursor:pointer}form .file-input{width:70%;margin:5px auto}@media (max-width: 767px){form .file-input{width:95%}}form .file-input input,form .file-input select{width:100%;cursor:pointer}form select{appearance:none;background-color:white;cursor:pointer;background-image:url("/public/icons/dropdown.svg");background-repeat:no-repeat;background-position:right 0.7rem top 50%;background-size:1.25em auto}form.data-form{width:700px;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:50px}form.data-form .input-box{margin-top:15px}form.data-form section{width:100%;margin-bottom:1em}form.data-form input,form.data-form select{margin:5px auto}@media (max-width: 767px){form.data-form{width:inherit;padding:15px 10px;margin:0px}form.data-form section{width:95%}}form .autocomplete-dropdown{border:1px solid #ccc;border-radius:4px;background-color:white;max-height:200px;min-width:340px;overflow-y:auto;position:absolute;display:flex;flex-direction:column;box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);z-index:999}form .autocomplete-dropdown a{padding:5px 10px;cursor:pointer}form .autocomplete-dropdown a:hover{background-color:#337ab7}form#form_authenticate{font-size:1.25rem;width:550px;box-shadow:0 10px 20px 0 rgba(0,0,0,0.1)}@media (max-width: 1023px){form#form_authenticate{width:80%}}form#form_authenticate input,form#form_authenticate select{margin:5px auto}form#form_authenticate input input[type="text"],form#form_authenticate select input[type="text"],form#form_authenticate input select[type="text"],form#form_authenticate select select[type="text"]{margin-bottom:20px}form#form_authenticate select{margin:5px auto 20px auto}form .check-box{display:inline-flex;align-items:center}form .check-box input,form .check-box select{width:fit-content}form .check-box label{margin-left:5px;font-style:italic;font-size:.875rem}form .section-box{margin-top:2em}form .error-message{padding:10px;border-radius:4px}.form-title{text-align:center}.navbar{background-color:white;display:flex;position:fixed;top:0;left:0;width:100%;height:3.5em;align-items:center;box-sizing:border-box;padding:10px 15px;z-index:1000}@media (max-width: 1023px){.navbar{padding:10px 10px}}.navbar .navbar-branding{font-size:1.25rem;font-weight:bold;margin-right:10px}.navbar .navbar-branding img{width:100%;height:1.5em}@media (max-width: 1023px){.navbar #logo.navbar-branding{display:none}}.navbar #title.navbar-branding{display:none}@media (max-width: 1023px){.navbar #title.navbar-branding{display:block}}.navbar ul{list-style-type:none;margin-left:auto;padding:0;display:flex;cursor:pointer}.navbar a{text-decoration:none}.navbar .dropdown{position:relative}@media (min-width: 1023px){.navbar .dropdown:hover .dropdown-menu{display:block;visibility:visible}}.navbar .dropdown ul{width:200px}@media (max-width: 1023px){.navbar .dropdown ul{width:300px}}.navbar .dropdown img{margin:auto 8px;width:20px;height:20px}.navbar .dropdown #dropdown-btn{display:flex;align-items:center}@media (max-width: 1023px){.navbar .dropdown #dropdown-btn{display:none}}.navbar .dropdown-menu{box-shadow:0 10px 20px 0 rgba(0,0,0,0.1);position:absolute;border-radius:4px;top:100%;right:0;padding:10px;background-color:#fff;height:fit-content;border:1px solid #ccc;display:none;visibility:hidden}@media (max-width: 1023px){.navbar .dropdown-menu{top:150%}}.navbar .dropdown-menu li{color:#333;display:flex;align-items:center;height:2em}.navbar .dropdown-menu img{margin:auto 6px auto 0px}.navbar .hamburger-icon{display:none}@media (max-width: 1023px){.navbar .hamburger-icon{width:28px;height:28px;display:flex;padding:0px;flex-direction:column;justify-content:space-around;align-items:center;cursor:pointer}.navbar .hamburger-icon span{width:100%;height:2px;background-color:#333;transition:0.2s}}.navbar .open span:nth-child(1){transform:rotate(45deg) translate(6.5px, 6px)}.navbar .open span:nth-child(2){opacity:0}.navbar .open span:nth-child(3){transform:rotate(-45deg) translate(6.5px, -6px)}.navbar .active-dropdown{display:block;visibility:visible}@keyframes spinner{to{transform:rotate(360deg)}}@-webkit-keyframes spinner{to{transform:rotate(360deg)}}.spinner,.spinner-sm{display:none;width:30px;height:30px;vertical-align:text-bottom;border:30px solid rgba(119,119,119,0.4);border-right-color:transparent;border-width:3px;border-radius:50%;animation:spinner 0.75s linear infinite;transition:opacity 0.85s ease-in}.spinner.htmx-request,.htmx-request.spinner-sm{display:inline}.spinner-sm{width:15px;height:15px;border-width:2px}.spinner-sm.btn-spinner{border:30px solid white;border-width:2px;border-right-color:transparent}.spinner-container{justify-content:center;display:flex}.spinner-container span,.spinner-container div{display:inline-block}.table-container{overflow-x:auto;display:flex;margin:0.5em 5px 1em 5px;width:auto;border-radius:8px}.table-container table{border-collapse:collapse;border-spacing:0;width:100%;max-width:100%}.table-container table a{color:#337ab7;text-decoration:none}.table-container table a:hover,.table-container table a:focus{color:#23527c;text-decoration:underline}.table-container table td{font-size:0.95em}.table-container table td:last-child{position:sticky;position:-webkit-sticky;right:0}.table-container table th,.table-container table td{text-align:left;padding:15px}.table-container table th{font-size:.875rem;background-color:rgba(220,220,220,0.6);border-bottom:1px solid #ccc}.table-container table th a{cursor:pointer}.table-container table th a:hover,.table-container table th a:focus{text-decoration:none}.table-container table th a:first-child{padding-right:3px}.table-container table th.header-actions{text-align:right}.table-container table tr:nth-child(even){background-color:#f2f2f2}.table-container table .action-link{cursor:pointer;z-index:-1}.table-container table .action-link:hover,.table-container table .action-link:focus{filter:brightness(0);text-decoration:none}@media (max-width: 600px){.table-container{box-shadow:none}.table-container table{table-layout:fixed}.table-container table thead{display:none}.table-container table tr:nth-child(even){background-color:white}.table-container table td{border-left:1px solid #ddd;border-right:1px solid #ddd;background-color:#f2f2f2;display:block;text-align:right;border-top:none}.table-container table td .empty{padding:15px}.table-container table td::before{content:attr(data-label);float:left}.table-container table td:last-child{margin-bottom:1em;border-bottom:1px solid #ddd;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.table-container table td:first-child{border-top:1px solid #ddd;border-top-left-radius:4px;border-top-right-radius:4px}}.pagination{display:inline-flex;font-size:.875rem;width:100%;justify-content:center;margin:0 auto 70px auto}.pagination button{background-color:white;border:none;width:40px;font-size:1.25rem;cursor:pointer}.pagination a{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;color:black;float:left;margin:auto 1px;padding:8px 16px;text-decoration:none;border-radius:4px;border:1px solid #ccc;cursor:pointer;display:none}.pagination a:nth-child(-n+4),.pagination a.collapse{display:block}.pagination a:nth-last-child(-n+3){display:block}.pagination a.active{background-color:#007AC0;display:block;color:white;border:1px solid #007AC0}.pagination a:hover:not(.active){background-color:#f1f1f1}.pagination .pager-control{display:inline-flex;justify-content:center;align-items:center;margin-left:20px;height:inherit;font-size:.875rem;float:right}.pagination .pager-control span{margin-right:5px}.pagination .pager-control select{font-size:.875rem;background-color:white;border:1px solid #ccc;border-radius:4px;padding:auto;height:inherit}.topnav{overflow-x:auto;background-color:white;max-height:10em;display:flex;border-bottom:1px solid #ccc;position:sticky;position:-webkit-sticky;top:3.4em;z-index:900}.topnav a{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;font-size:1rem;cursor:pointer;float:left;display:block;color:#545454;text-align:center;padding:14px 17px;text-decoration:none}@media (max-width: 1023px){.topnav a{font-size:.875rem}}.topnav a:hover{color:black}.topnav .active{border-bottom:3px solid #007AC0;color:black}.topnav .active span{background-color:#007AC0}.nav-content h2{margin-left:5px}.directive{background-color:#f5f5f5;margin:1em auto;min-height:3em;padding:10px 25px}.directive h3{margin:5px auto}@media (max-width: 1023px){.directive{font-size:0.9em;padding:10px}}.directive .prompt-save a{float:right;top:20%}.directive ol{margin-bottom:1px;padding-bottom:0px;padding-top:0px}.directive .close-btn{float:right}.directive pre{background-color:white;padding:5px 5px 5px 5px;text-align:left;text-wrap:wrap}.directive pre button{float:right}.directive.get-started{box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);background-color:#f5f5f5;font-size:1.25rem;padding-bottom:40px;text-align:center;border-radius:#ccc;margin:7em 7em;display:flex;flex-direction:column;justify-content:center;align-items:center}.directive.get-started p{max-width:40%}.directive.get-started span{font-size:1.75rem}.directive.get-started .directive-dropdown{display:flex}@media (max-width: 1023px){.directive.get-started{margin:7em 5px;padding:10px 10px 30px 10px}.directive.get-started p{width:90%;max-width:none}.directive.get-started button{font-size:1rem}}.hidden-tag-container{margin-top:10px;font-size:0.95em}.login-page{background-color:#F8F8F8}.container{margin:0 auto;padding-top:0.4em}.border{border:1px solid blue}.actions{display:flex;justify-content:flex-end;padding:10px}.actions .top,.actions .bottom{display:flex;align-items:center;width:fit-content}@media (max-width: 600px){.actions{padding:0;flex-direction:column;width:100%}.actions button,.actions a{width:14em;margin:2px}.actions .top{order:1;width:inherit;justify-content:center;margin:5px auto 3px auto}.actions .bottom{order:2;width:inherit;justify-content:center}}.content{padding-top:3em;margin:auto;width:98%}.center{margin:1em}.hidden{display:none}.active{display:block}img{vertical-align:middle}.error{color:#da4548;text-align:center;display:none;font-size:1rem}.error-text{color:#f14668}.success-text{color:#48c78e}.staging-text{color:#007AC0}.warning-text{color:#ffe08a}.white-text{color:white}.error-bg{background-color:#f14668}.success-bg{background-color:#48c78e}.staging-bg{background-color:#007AC0}.warning-bg{background-color:#ffe08a;color:#333}.striped-bg{background:repeating-linear-gradient(135deg, #606dbc, #606dbc 5px, #465298 5px, #465298 10px)}.logo{width:60%;margin:30px auto 40px auto;display:block}.login-branding{width:400px;margin:0 auto}@media (max-width: 1023px){.login-branding{width:85%}}.login-branding p{text-align:center;font-size:1.5rem;font-weight:bold}progress{width:100%;height:15px;margin:10px auto;background-color:white;border-radius:10px;overflow:hidden}progress::-webkit-progress-bar{background-color:white;border-radius:10px}progress::-moz-progress-bar{background-color:#007AC0}progress::-webkit-progress-value{background-color:#007AC0;border-radius:10px;transition:width 1s ease}
diff --git a/src/public/icons/calendar.svg b/src/public/icons/calendar.svg
new file mode 100644
index 00000000..265c262b
--- /dev/null
+++ b/src/public/icons/calendar.svg
@@ -0,0 +1,11 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
+<g id="SVGRepo_iconCarrier"> <path d="M17 4.75H15.75V3.5C15.75 3.30109 15.671 3.11032 15.5303 2.96967C15.3897 2.82902 15.1989 2.75 15 2.75C14.8011 2.75 14.6103 2.82902 14.4697 2.96967C14.329 3.11032 14.25 3.30109 14.25 3.5V4.75H9.75V3.5C9.75 3.30109 9.67098 3.11032 9.53033 2.96967C9.38968 2.82902 9.19891 2.75 9 2.75C8.80109 2.75 8.61032 2.82902 8.46967 2.96967C8.32902 3.11032 8.25 3.30109 8.25 3.5V4.75H7C6.27065 4.75 5.57118 5.03973 5.05546 5.55546C4.53973 6.07118 4.25 6.77065 4.25 7.5V18.5C4.25 19.2293 4.53973 19.9288 5.05546 20.4445C5.57118 20.9603 6.27065 21.25 7 21.25H17C17.7293 21.25 18.4288 20.9603 18.9445 20.4445C19.4603 19.9288 19.75 19.2293 19.75 18.5V7.5C19.75 6.77065 19.4603 6.07118 18.9445 5.55546C18.4288 5.03973 17.7293 4.75 17 4.75ZM7 6.25H8.25V7.5C8.25 7.69891 8.32902 7.88968 8.46967 8.03033C8.61032 8.17098 8.80109 8.25 9 8.25C9.19891 8.25 9.38968 8.17098 9.53033 8.03033C9.67098 7.88968 9.75 7.69891 9.75 7.5V6.25H14.25V7.5C14.25 7.69891 14.329 7.88968 14.4697 8.03033C14.6103 8.17098 14.8011 8.25 15 8.25C15.1989 8.25 15.3897 8.17098 15.5303 8.03033C15.671 7.88968 15.75 7.69891 15.75 7.5V6.25H17C17.3315 6.25 17.6495 6.3817 17.8839 6.61612C18.1183 6.85054 18.25 7.16848 18.25 7.5V10.25H5.75V7.5C5.75 7.16848 5.8817 6.85054 6.11612 6.61612C6.35054 6.3817 6.66848 6.25 7 6.25ZM17 19.75H7C6.66848 19.75 6.35054 19.6183 6.11612 19.3839C5.8817 19.1495 5.75 18.8315 5.75 18.5V11.75H18.25V18.5C18.25 18.8315 18.1183 19.1495 17.8839 19.3839C17.6495 19.6183 17.3315 19.75 17 19.75Z" fill="#000000"/> <path d="M14 15.25H12.75V14C12.75 13.8011 12.671 13.6103 12.5303 13.4697C12.3897 13.329 12.1989 13.25 12 13.25C11.8011 13.25 11.6103 13.329 11.4697 13.4697C11.329 13.6103 11.25 13.8011 11.25 14V15.25H10C9.80109 15.25 9.61032 15.329 9.46967 15.4697C9.32902 15.6103 9.25 15.8011 9.25 16C9.25 16.1989 9.32902 16.3897 9.46967 16.5303C9.61032 16.671 9.80109 16.75 10 16.75H11.25V18C11.25 18.1989 11.329 18.3897 11.4697 18.5303C11.6103 18.671 11.8011 18.75 12 18.75C12.1989 18.75 12.3897 18.671 12.5303 18.5303C12.671 18.3897 12.75 18.1989 12.75 18V16.75H14C14.1989 16.75 14.3897 16.671 14.5303 16.5303C14.671 16.3897 14.75 16.1989 14.75 16C14.75 15.8011 14.671 15.6103 14.5303 15.4697C14.3897 15.329 14.1989 15.25 14 15.25Z" fill="#000000"/> </g>
+
+</svg>
diff --git a/src/public/scripts/datepicker.min.js b/src/public/scripts/datepicker.min.js
new file mode 100644
index 00000000..89ebdf42
--- /dev/null
+++ b/src/public/scripts/datepicker.min.js
@@ -0,0 +1 @@
+var Datepicker=function(){"use strict";function e(e){return e[e.length-1]}function t(e,...t){return t.forEach((t=>{e.includes(t)||e.push(t)})),e}function i(e,t){return e?e.split(t):[]}function n(e,t,i){return(void 0===t||e>=t)&&(void 0===i||e<=i)}function s(e,t,i){return e<t?t:e>i?i:e}function a(e,t,i={},n=0,s=""){s+=`<${Object.keys(i).reduce(((e,t)=>{let s=i[t];return"function"==typeof s&&(s=s(n)),`${e} ${t}="${s}"`}),e)}></${e}>`;const r=n+1;return r<t?a(e,t,i,r,s):s}function r(e){return e.replace(/>\s+/g,">").replace(/\s+</,"<")}function o(e){return new Date(e).setHours(0,0,0,0)}function d(){return(new Date).setHours(0,0,0,0)}function c(...e){switch(e.length){case 0:return d();case 1:return o(e[0])}const t=new Date(0);return t.setFullYear(...e),t.setHours(0,0,0,0)}function l(e,t){const i=new Date(e);return i.setDate(i.getDate()+t)}function h(e,t){const i=new Date(e),n=i.getMonth()+t;let s=n%12;s<0&&(s+=12);const a=i.setMonth(n);return i.getMonth()!==s?i.setDate(0):a}function u(e,t){const i=new Date(e),n=i.getMonth(),s=i.setFullYear(i.getFullYear()+t);return 1===n&&2===i.getMonth()?i.setDate(0):s}function f(e,t){return(e-t+7)%7}function p(e,t,i=0){const n=new Date(e).getDay();return l(e,f(t,i)-f(n,i))}function m(e,t){return Math.round((e-t)/6048e5)+1}function w(e){const t=p(e,4,1);return m(t,p(new Date(t).setMonth(0,4),4,1))}function g(e,t){const i=p(new Date(e).setMonth(0,1),t,t),n=p(e,t,t),s=m(n,i);if(s<53)return s;return n===p(new Date(e).setDate(32),t,t)?1:s}function y(e){return g(e,0)}function D(e){return g(e,6)}function k(e,t){const i=new Date(e).getFullYear();return Math.floor(i/t)*t}function b(e,t,i){if(1!==t&&2!==t)return e;const n=new Date(e);return 1===t?i?n.setMonth(n.getMonth()+1,0):n.setDate(1):i?n.setFullYear(n.getFullYear()+1,0,0):n.setMonth(0,1),n.setHours(0,0,0,0)}const v=/dd?|DD?|mm?|MM?|yy?(?:yy)?/,x=/[\s!-/:-@[-`{-~年月日]+/;let M={};const N={y:(e,t)=>new Date(e).setFullYear(parseInt(t,10)),m(e,t,i){const n=new Date(e);let s=parseInt(t,10)-1;if(isNaN(s)){if(!t)return NaN;const e=t.toLowerCase(),n=t=>t.toLowerCase().startsWith(e);if(s=i.monthsShort.findIndex(n),s<0&&(s=i.months.findIndex(n)),s<0)return NaN}return n.setMonth(s),n.getMonth()!==O(s)?n.setDate(0):n.getTime()},d:(e,t)=>new Date(e).setDate(parseInt(t,10))},S={d:e=>e.getDate(),dd:e=>C(e.getDate(),2),D:(e,t)=>t.daysShort[e.getDay()],DD:(e,t)=>t.days[e.getDay()],m:e=>e.getMonth()+1,mm:e=>C(e.getMonth()+1,2),M:(e,t)=>t.monthsShort[e.getMonth()],MM:(e,t)=>t.months[e.getMonth()],y:e=>e.getFullYear(),yy:e=>C(e.getFullYear(),2).slice(-2),yyyy:e=>C(e.getFullYear(),4)};function O(e){return e>-1?e%12:O(e+12)}function C(e,t){return e.toString().padStart(t,"0")}function F(t){if("string"!=typeof t)throw new Error("Invalid date format.");if(t in M)return M[t];const i=t.split(v),n=t.match(new RegExp(v,"g"));if(0===i.length||!n)throw new Error("Invalid date format.");const s=n.map((e=>S[e])),a=Object.keys(N).reduce(((e,t)=>(n.find((e=>"D"!==e[0]&&e[0].toLowerCase()===t))&&e.push(t),e)),[]);return M[t]={parser(e,t){const i=e.split(x).reduce(((e,t,i)=>{if(t.length>0&&n[i]){const s=n[i][0];"M"===s?e.m=t:"D"!==s&&(e[s]=t)}return e}),{});return a.reduce(((e,n)=>{const s=N[n](e,i[n],t);return isNaN(s)?e:s}),d())},formatter:(t,n)=>s.reduce(((e,s,a)=>e+`${i[a]}${s(t,n)}`),"")+e(i)}}function V(e,t,i){if(e instanceof Date||"number"==typeof e){const t=o(e);return isNaN(t)?void 0:t}if(e){if("today"===e)return d();if(t&&t.toValue){const n=t.toValue(e,t,i);return isNaN(n)?void 0:o(n)}return F(t).parser(e,i)}}function B(e,t,i){if(isNaN(e)||!e&&0!==e)return"";const n="number"==typeof e?new Date(e):e;return t.toDisplay?t.toDisplay(n,t,i):F(t).formatter(n,i)}const E=document.createRange();function L(e){return E.createContextualFragment(e)}function A(e){return e.parentElement||(e.parentNode instanceof ShadowRoot?e.parentNode.host:void 0)}function Y(e){return e.getRootNode().activeElement===e}function W(e){"none"!==e.style.display&&(e.style.display&&(e.dataset.styleDisplay=e.style.display),e.style.display="none")}function K(e){"none"===e.style.display&&(e.dataset.styleDisplay?(e.style.display=e.dataset.styleDisplay,delete e.dataset.styleDisplay):e.style.display="")}function _(e){e.firstChild&&(e.removeChild(e.firstChild),_(e))}const T=new WeakMap,{addEventListener:H,removeEventListener:j}=EventTarget.prototype;function R(e,t){let i=T.get(e);i||(i=[],T.set(e,i)),t.forEach((e=>{H.call(...e),i.push(e)}))}if(!Event.prototype.composedPath){const e=(t,i=[])=>{let n;return i.push(t),t.parentNode?n=t.parentNode:t.host?n=t.host:t.defaultView&&(n=t.defaultView),n?e(n,i):i};Event.prototype.composedPath=function(){return e(this.target)}}function $(e,t,i){const[n,...s]=e;return t(n)?n:n!==i&&"HTML"!==n.tagName&&0!==s.length?$(s,t,i):void 0}function I(e,t){const i="function"==typeof t?t:e=>e instanceof Element&&e.matches(t);return $(e.composedPath(),i,e.currentTarget)}const P={en:{days:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],daysShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],daysMin:["Su","Mo","Tu","We","Th","Fr","Sa"],months:["January","February","March","April","May","June","July","August","September","October","November","December"],monthsShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],today:"Today",clear:"Clear",titleFormat:"MM y"}},J={autohide:!1,beforeShowDay:null,beforeShowDecade:null,beforeShowMonth:null,beforeShowYear:null,clearButton:!1,dateDelimiter:",",datesDisabled:[],daysOfWeekDisabled:[],daysOfWeekHighlighted:[],defaultViewDate:void 0,disableTouchKeyboard:!1,enableOnReadonly:!0,format:"mm/dd/yyyy",language:"en",maxDate:null,maxNumberOfDates:1,maxView:3,minDate:null,nextArrow:"»",orientation:"auto",pickLevel:0,prevArrow:"«",showDaysOfWeek:!0,showOnClick:!0,showOnFocus:!0,startView:0,title:"",todayButton:!1,todayButtonMode:0,todayHighlight:!1,updateOnBlur:!0,weekNumbers:0,weekStart:0},{language:U,format:q,weekStart:z}=J;function X(e,i){return e.length<6&&i>=0&&i<7?t(e,i):e}function G(e,t){switch(4===e?6===t?3:!t+1:e){case 1:return w;case 2:return y;case 3:return D}}function Q(e,t,i){return t.weekStart=e,t.weekEnd=(e+6)%7,4===i&&(t.getWeekNumber=G(4,e)),e}function Z(e,t,i,n){const s=V(e,t,i);return void 0!==s?s:n}function ee(e,t,i=3){const n=parseInt(e,10);return n>=0&&n<=i?n:t}function te(e,t,i,n=void 0){t in e&&(i in e||(e[i]=n?n(e[t]):e[t]),delete e[t])}function ie(e,i){const n=Object.assign({},e),s={},a=i.constructor.locales,r=!!i.rangeSideIndex;let{datesDisabled:o,format:d,language:l,locale:h,maxDate:u,maxView:f,minDate:p,pickLevel:m,startView:w,weekNumbers:g,weekStart:y}=i.config||{};if(te(n,"calendarWeeks","weekNumbers",(e=>e?1:0)),te(n,"clearBtn","clearButton"),te(n,"todayBtn","todayButton"),te(n,"todayBtnMode","todayButtonMode"),n.language){let e;if(n.language!==l&&(a[n.language]?e=n.language:(e=n.language.split("-")[0],a[e]||(e=!1))),delete n.language,e){l=s.language=e;const t=h||a[U];h=Object.assign({format:q,weekStart:z},a[U]),l!==U&&Object.assign(h,a[l]),s.locale=h,d===t.format&&(d=s.format=h.format),y===t.weekStart&&(y=Q(h.weekStart,s,g))}}if(n.format){const e="function"==typeof n.format.toDisplay,t="function"==typeof n.format.toValue,i=v.test(n.format);(e&&t||i)&&(d=s.format=n.format),delete n.format}let D=m;"pickLevel"in n&&(D=ee(n.pickLevel,m,2),delete n.pickLevel),D!==m&&(D>m&&("minDate"in n||(n.minDate=p),"maxDate"in n||(n.maxDate=u)),o&&!n.datesDisabled&&(n.datesDisabled=[]),m=s.pickLevel=D);let k=p,x=u;if("minDate"in n){const e=c(0,0,1);k=null===n.minDate?e:Z(n.minDate,d,h,k),k!==e&&(k=b(k,m,!1)),delete n.minDate}if("maxDate"in n&&(x=null===n.maxDate?void 0:Z(n.maxDate,d,h,x),void 0!==x&&(x=b(x,m,!0)),delete n.maxDate),x<k?(p=s.minDate=x,u=s.maxDate=k):(p!==k&&(p=s.minDate=k),u!==x&&(u=s.maxDate=x)),n.datesDisabled){const e=n.datesDisabled;if("function"==typeof e)s.datesDisabled=null,s.checkDisabled=(t,i)=>e(new Date(t),i,r);else{const i=s.datesDisabled=e.reduce(((e,i)=>{const n=V(i,d,h);return void 0!==n?t(e,b(n,m,r)):e}),[]);s.checkDisabled=e=>i.includes(e)}delete n.datesDisabled}if("defaultViewDate"in n){const e=V(n.defaultViewDate,d,h);void 0!==e&&(s.defaultViewDate=e),delete n.defaultViewDate}if("weekStart"in n){const e=Number(n.weekStart)%7;isNaN(e)||(y=Q(e,s,g)),delete n.weekStart}if(n.daysOfWeekDisabled&&(s.daysOfWeekDisabled=n.daysOfWeekDisabled.reduce(X,[]),delete n.daysOfWeekDisabled),n.daysOfWeekHighlighted&&(s.daysOfWeekHighlighted=n.daysOfWeekHighlighted.reduce(X,[]),delete n.daysOfWeekHighlighted),"weekNumbers"in n){let e=n.weekNumbers;if(e){const t="function"==typeof e?(t,i)=>e(new Date(t),i):G(e=parseInt(e,10),y);t&&(g=s.weekNumbers=e,s.getWeekNumber=t)}else g=s.weekNumbers=0,s.getWeekNumber=null;delete n.weekNumbers}if("maxNumberOfDates"in n){const e=parseInt(n.maxNumberOfDates,10);e>=0&&(s.maxNumberOfDates=e,s.multidate=1!==e),delete n.maxNumberOfDates}n.dateDelimiter&&(s.dateDelimiter=String(n.dateDelimiter),delete n.dateDelimiter);let M=f;"maxView"in n&&(M=ee(n.maxView,f),delete n.maxView),M=m>M?m:M,M!==f&&(f=s.maxView=M);let N=w;if("startView"in n&&(N=ee(n.startView,N),delete n.startView),N<m?N=m:N>f&&(N=f),N!==w&&(s.startView=N),n.prevArrow){const e=L(n.prevArrow);e.childNodes.length>0&&(s.prevArrow=e.childNodes),delete n.prevArrow}if(n.nextArrow){const e=L(n.nextArrow);e.childNodes.length>0&&(s.nextArrow=e.childNodes),delete n.nextArrow}if("disableTouchKeyboard"in n&&(s.disableTouchKeyboard="ontouchstart"in document&&!!n.disableTouchKeyboard,delete n.disableTouchKeyboard),n.orientation){const e=n.orientation.toLowerCase().split(/\s+/g);s.orientation={x:e.find((e=>"left"===e||"right"===e))||"auto",y:e.find((e=>"top"===e||"bottom"===e))||"auto"},delete n.orientation}if("todayButtonMode"in n){switch(n.todayButtonMode){case 0:case 1:s.todayButtonMode=n.todayButtonMode}delete n.todayButtonMode}return Object.entries(n).forEach((([e,t])=>{void 0!==t&&e in J&&(s[e]=t)})),s}const ne={show:{key:"ArrowDown"},hide:null,toggle:{key:"Escape"},prevButton:{key:"ArrowLeft",ctrlOrMetaKey:!0},nextButton:{key:"ArrowRight",ctrlOrMetaKey:!0},viewSwitch:{key:"ArrowUp",ctrlOrMetaKey:!0},clearButton:{key:"Backspace",ctrlOrMetaKey:!0},todayButton:{key:".",ctrlOrMetaKey:!0},exitEditMode:{key:"ArrowDown",ctrlOrMetaKey:!0}};const se=e=>e.map((e=>`<button type="button" class="%buttonClass% ${e}" tabindex="-1"></button>`)).join(""),ae=r(`<div class="datepicker">\n  <div class="datepicker-picker">\n    <div class="datepicker-header">\n      <div class="datepicker-title"></div>\n      <div class="datepicker-controls">\n        ${se(["prev-button prev-btn","view-switch","next-button next-btn"])}\n      </div>\n    </div>\n    <div class="datepicker-main"></div>\n    <div class="datepicker-footer">\n      <div class="datepicker-controls">\n        ${se(["today-button today-btn","clear-button clear-btn"])}\n      </div>\n    </div>\n  </div>\n</div>`),re=r(`<div class="days">\n  <div class="days-of-week">${a("span",7,{class:"dow"})}</div>\n  <div class="datepicker-grid">${a("span",42)}</div>\n</div>`),oe=r(`<div class="week-numbers calendar-weeks">\n  <div class="days-of-week"><span class="dow"></span></div>\n  <div class="weeks">${a("span",6,{class:"week"})}</div>\n</div>`);class de{constructor(e,t){Object.assign(this,t,{picker:e,element:L('<div class="datepicker-view"></div>').firstChild,selected:[],isRangeEnd:!!e.datepicker.rangeSideIndex}),this.init(this.picker.datepicker.config)}init(e){"pickLevel"in e&&(this.isMinView=this.id===e.pickLevel),this.setOptions(e),this.updateFocus(),this.updateSelection()}prepareForRender(e,t,i){this.disabled=[];const n=this.picker;n.setViewSwitchLabel(e),n.setPrevButtonDisabled(t),n.setNextButtonDisabled(i)}setDisabled(e,i){i.add("disabled"),t(this.disabled,e)}performBeforeHook(e,t){let i=this.beforeShow(new Date(t));switch(typeof i){case"boolean":i={enabled:i};break;case"string":i={classes:i}}if(i){const n=e.classList;if(!1===i.enabled&&this.setDisabled(t,n),i.classes){const e=i.classes.split(/\s+/);n.add(...e),e.includes("disabled")&&this.setDisabled(t,n)}i.content&&function(e,t){_(e),t instanceof DocumentFragment?e.appendChild(t):"string"==typeof t?e.appendChild(L(t)):"function"==typeof t.forEach&&t.forEach((t=>{e.appendChild(t)}))}(e,i.content)}}renderCell(e,t,i,n,{selected:s,range:a},r,o=[]){e.textContent=t,this.isMinView&&(e.dataset.date=n);const d=e.classList;if(e.className=`datepicker-cell ${this.cellClass}`,i<this.first?d.add("prev"):i>this.last&&d.add("next"),d.add(...o),(r||this.checkDisabled(n,this.id))&&this.setDisabled(n,d),a){const[e,t]=a;i>e&&i<t&&d.add("range"),i===e&&d.add("range-start"),i===t&&d.add("range-end")}s.includes(i)&&d.add("selected"),i===this.focused&&d.add("focused"),this.beforeShow&&this.performBeforeHook(e,n)}refreshCell(e,t,i,[n,s]){const a=e.classList;a.remove("range","range-start","range-end","selected","focused"),t>n&&t<s&&a.add("range"),t===n&&a.add("range-start"),t===s&&a.add("range-end"),i.includes(t)&&a.add("selected"),t===this.focused&&a.add("focused")}changeFocusedCell(e){this.grid.querySelectorAll(".focused").forEach((e=>{e.classList.remove("focused")})),this.grid.children[e].classList.add("focused")}}class ce extends de{constructor(e){super(e,{id:0,name:"days",cellClass:"day"})}init(e,t=!0){if(t){const e=L(re).firstChild;this.dow=e.firstChild,this.grid=e.lastChild,this.element.appendChild(e)}super.init(e)}setOptions(e){let t;if("minDate"in e&&(this.minDate=e.minDate),"maxDate"in e&&(this.maxDate=e.maxDate),e.checkDisabled&&(this.checkDisabled=e.checkDisabled),e.daysOfWeekDisabled&&(this.daysOfWeekDisabled=e.daysOfWeekDisabled,t=!0),e.daysOfWeekHighlighted&&(this.daysOfWeekHighlighted=e.daysOfWeekHighlighted),"todayHighlight"in e&&(this.todayHighlight=e.todayHighlight),"weekStart"in e&&(this.weekStart=e.weekStart,this.weekEnd=e.weekEnd,t=!0),e.locale){const i=this.locale=e.locale;this.dayNames=i.daysMin,this.switchLabelFormat=i.titleFormat,t=!0}if("beforeShowDay"in e&&(this.beforeShow="function"==typeof e.beforeShowDay?e.beforeShowDay:void 0),"weekNumbers"in e)if(e.weekNumbers&&!this.weekNumbers){const e=L(oe).firstChild;this.weekNumbers={element:e,dow:e.firstChild,weeks:e.lastChild},this.element.insertBefore(e,this.element.firstChild)}else this.weekNumbers&&!e.weekNumbers&&(this.element.removeChild(this.weekNumbers.element),this.weekNumbers=null);"getWeekNumber"in e&&(this.getWeekNumber=e.getWeekNumber),"showDaysOfWeek"in e&&(e.showDaysOfWeek?(K(this.dow),this.weekNumbers&&K(this.weekNumbers.dow)):(W(this.dow),this.weekNumbers&&W(this.weekNumbers.dow))),t&&Array.from(this.dow.children).forEach(((e,t)=>{const i=(this.weekStart+t)%7;e.textContent=this.dayNames[i],e.className=this.daysOfWeekDisabled.includes(i)?"dow disabled":"dow"}))}updateFocus(){const e=new Date(this.picker.viewDate),t=e.getFullYear(),i=e.getMonth(),n=c(t,i,1),s=p(n,this.weekStart,this.weekStart);this.first=n,this.last=c(t,i+1,0),this.start=s,this.focused=this.picker.viewDate}updateSelection(){const{dates:e,rangepicker:t}=this.picker.datepicker;this.selected=e,t&&(this.range=t.dates)}render(){if(this.today=this.todayHighlight?d():void 0,this.prepareForRender(B(this.focused,this.switchLabelFormat,this.locale),this.first<=this.minDate,this.last>=this.maxDate),this.weekNumbers){const e=this.weekStart,t=p(this.first,e,e);Array.from(this.weekNumbers.weeks.children).forEach(((i,n)=>{const s=l(t,7*n);i.textContent=this.getWeekNumber(s,e),n>3&&i.classList[s>this.last?"add":"remove"]("next")}))}Array.from(this.grid.children).forEach(((e,t)=>{const i=l(this.start,t),n=new Date(i),s=n.getDay(),a=[];this.today===i&&a.push("today"),this.daysOfWeekHighlighted.includes(s)&&a.push("highlighted"),this.renderCell(e,n.getDate(),i,i,this,i<this.minDate||i>this.maxDate||this.daysOfWeekDisabled.includes(s),a)}))}refresh(){const e=this.range||[];Array.from(this.grid.children).forEach((t=>{this.refreshCell(t,Number(t.dataset.date),this.selected,e)}))}refreshFocus(){this.changeFocusedCell(Math.round((this.focused-this.start)/864e5))}}function le(e,t){if(!e||!e[0]||!e[1])return;const[[i,n],[s,a]]=e;return i>t||s<t?void 0:[i===t?n:-1,s===t?a:12]}class he extends de{constructor(e){super(e,{id:1,name:"months",cellClass:"month"})}init(e,t=!0){t&&(this.grid=this.element,this.element.classList.add("months","datepicker-grid"),this.grid.appendChild(L(a("span",12,{"data-month":e=>e}))),this.first=0,this.last=11),super.init(e)}setOptions(e){if(e.locale&&(this.monthNames=e.locale.monthsShort),"minDate"in e)if(void 0===e.minDate)this.minYear=this.minMonth=this.minDate=void 0;else{const t=new Date(e.minDate);this.minYear=t.getFullYear(),this.minMonth=t.getMonth(),this.minDate=t.setDate(1)}if("maxDate"in e)if(void 0===e.maxDate)this.maxYear=this.maxMonth=this.maxDate=void 0;else{const t=new Date(e.maxDate);this.maxYear=t.getFullYear(),this.maxMonth=t.getMonth(),this.maxDate=c(this.maxYear,this.maxMonth+1,0)}e.checkDisabled&&(this.checkDisabled=this.isMinView||null===e.datesDisabled?e.checkDisabled:()=>!1),"beforeShowMonth"in e&&(this.beforeShow="function"==typeof e.beforeShowMonth?e.beforeShowMonth:void 0)}updateFocus(){const e=new Date(this.picker.viewDate);this.year=e.getFullYear(),this.focused=e.getMonth()}updateSelection(){const{dates:e,rangepicker:i}=this.picker.datepicker;this.selected=e.reduce(((e,i)=>{const n=new Date(i),s=n.getFullYear(),a=n.getMonth();return void 0===e[s]?e[s]=[a]:t(e[s],a),e}),{}),i&&i.dates&&(this.range=i.dates.map((e=>{const t=new Date(e);return isNaN(t)?void 0:[t.getFullYear(),t.getMonth()]})))}render(){this.prepareForRender(this.year,this.year<=this.minYear,this.year>=this.maxYear);const e=this.selected[this.year]||[],t=this.year<this.minYear||this.year>this.maxYear,i=this.year===this.minYear,n=this.year===this.maxYear,s=le(this.range,this.year);Array.from(this.grid.children).forEach(((a,r)=>{const o=b(new Date(this.year,r,1),1,this.isRangeEnd);this.renderCell(a,this.monthNames[r],r,o,{selected:e,range:s},t||i&&r<this.minMonth||n&&r>this.maxMonth)}))}refresh(){const e=this.selected[this.year]||[],t=le(this.range,this.year)||[];Array.from(this.grid.children).forEach(((i,n)=>{this.refreshCell(i,n,e,t)}))}refreshFocus(){this.changeFocusedCell(this.focused)}}class ue extends de{constructor(e,t){super(e,t)}init(e,t=!0){var i;t&&(this.navStep=10*this.step,this.beforeShowOption=`beforeShow${i=this.cellClass,[...i].reduce(((e,t,i)=>e+(i?t:t.toUpperCase())),"")}`,this.grid=this.element,this.element.classList.add(this.name,"datepicker-grid"),this.grid.appendChild(L(a("span",12)))),super.init(e)}setOptions(e){if("minDate"in e&&(void 0===e.minDate?this.minYear=this.minDate=void 0:(this.minYear=k(e.minDate,this.step),this.minDate=c(this.minYear,0,1))),"maxDate"in e&&(void 0===e.maxDate?this.maxYear=this.maxDate=void 0:(this.maxYear=k(e.maxDate,this.step),this.maxDate=c(this.maxYear,11,31))),e.checkDisabled&&(this.checkDisabled=this.isMinView||null===e.datesDisabled?e.checkDisabled:()=>!1),this.beforeShowOption in e){const t=e[this.beforeShowOption];this.beforeShow="function"==typeof t?t:void 0}}updateFocus(){const e=new Date(this.picker.viewDate),t=k(e,this.navStep),i=t+9*this.step;this.first=t,this.last=i,this.start=t-this.step,this.focused=k(e,this.step)}updateSelection(){const{dates:e,rangepicker:i}=this.picker.datepicker;this.selected=e.reduce(((e,i)=>t(e,k(i,this.step))),[]),i&&i.dates&&(this.range=i.dates.map((e=>{if(void 0!==e)return k(e,this.step)})))}render(){this.prepareForRender(`${this.first}-${this.last}`,this.first<=this.minYear,this.last>=this.maxYear),Array.from(this.grid.children).forEach(((e,t)=>{const i=this.start+t*this.step,n=b(new Date(i,0,1),2,this.isRangeEnd);e.dataset.year=i,this.renderCell(e,i,i,n,this,i<this.minYear||i>this.maxYear)}))}refresh(){const e=this.range||[];Array.from(this.grid.children).forEach((t=>{this.refreshCell(t,Number(t.textContent),this.selected,e)}))}refreshFocus(){this.changeFocusedCell(Math.round((this.focused-this.start)/this.step))}}function fe(e,t){const i={bubbles:!0,cancelable:!0,detail:{date:e.getDate(),viewDate:new Date(e.picker.viewDate),viewId:e.picker.currentView.id,datepicker:e}};e.element.dispatchEvent(new CustomEvent(t,i))}function pe(e,t){const{config:i,picker:n}=e,{currentView:a,viewDate:r}=n;let o;switch(a.id){case 0:o=h(r,t);break;case 1:o=u(r,t);break;default:o=u(r,t*a.navStep)}o=s(o,i.minDate,i.maxDate),n.changeFocus(o).render()}function me(e){const t=e.picker.currentView.id;t!==e.config.maxView&&e.picker.changeView(t+1).render()}function we(e){e.setDate({clear:!0})}function ge(e){const t=d();1===e.config.todayButtonMode?e.setDate(t,{forceRefresh:!0,viewDate:t}):e.setFocusedDate(t,!0)}function ye(e){const t=()=>{e.config.updateOnBlur?e.update({revert:!0}):e.refresh("input"),e.hide()},i=e.element;Y(i)?i.addEventListener("blur",t,{once:!0}):t()}function De(e,t){const i=e.picker,n=new Date(i.viewDate),s=i.currentView.id,a=1===s?h(n,t-n.getMonth()):u(n,t-n.getFullYear());i.changeFocus(a).changeView(s-1).render()}function ke(e){me(e)}function be(e){pe(e,-1)}function ve(e){pe(e,1)}function xe(e,t){const i=I(t,".datepicker-cell");if(!i||i.classList.contains("disabled"))return;const{id:n,isMinView:s}=e.picker.currentView,a=i.dataset;s?e.setDate(Number(a.date)):De(e,Number(1===n?a.month:a.year))}function Me(e){e.preventDefault()}const Ne=["left","top","right","bottom"].reduce(((e,t)=>(e[t]=`datepicker-orient-${t}`,e)),{}),Se=e=>e?`${e}px`:e;function Oe(e,t){if("title"in t&&(t.title?(e.controls.title.textContent=t.title,K(e.controls.title)):(e.controls.title.textContent="",W(e.controls.title))),t.prevArrow){const i=e.controls.prevButton;_(i),t.prevArrow.forEach((e=>{i.appendChild(e.cloneNode(!0))}))}if(t.nextArrow){const i=e.controls.nextButton;_(i),t.nextArrow.forEach((e=>{i.appendChild(e.cloneNode(!0))}))}if(t.locale&&(e.controls.todayButton.textContent=t.locale.today,e.controls.clearButton.textContent=t.locale.clear),"todayButton"in t&&(t.todayButton?K(e.controls.todayButton):W(e.controls.todayButton)),"minDate"in t||"maxDate"in t){const{minDate:t,maxDate:i}=e.datepicker.config;e.controls.todayButton.disabled=!n(d(),t,i)}"clearButton"in t&&(t.clearButton?K(e.controls.clearButton):W(e.controls.clearButton))}function Ce(t){const{dates:i,config:n,rangeSideIndex:a}=t;return s(i.length>0?e(i):b(n.defaultViewDate,n.pickLevel,a),n.minDate,n.maxDate)}function Fe(e,t){"_oldViewDate"in e||t===e.viewDate||(e._oldViewDate=e.viewDate),e.viewDate=t;const{id:i,year:n,first:s,last:a}=e.currentView,r=new Date(t).getFullYear();switch(i){case 0:return t<s||t>a;case 1:return r!==n;default:return r<s||r>a}}function Ve(e){return window.getComputedStyle(e).direction}function Be(e){const t=A(e);if(t!==document.body&&t)return"visible"!==window.getComputedStyle(t).overflow?t:Be(t)}class Ee{constructor(e){const{config:t,inputField:i}=this.datepicker=e,n=ae.replace(/%buttonClass%/g,t.buttonClass),s=this.element=L(n).firstChild,[a,r,o]=s.firstChild.children,d=a.firstElementChild,[c,l,h]=a.lastElementChild.children,[u,f]=o.firstChild.children,p={title:d,prevButton:c,viewSwitch:l,nextButton:h,todayButton:u,clearButton:f};this.main=r,this.controls=p;const m=i?"dropdown":"inline";s.classList.add(`datepicker-${m}`),Oe(this,t),this.viewDate=Ce(e),R(e,[[s,"mousedown",Me],[r,"click",xe.bind(null,e)],[p.viewSwitch,"click",ke.bind(null,e)],[p.prevButton,"click",be.bind(null,e)],[p.nextButton,"click",ve.bind(null,e)],[p.todayButton,"click",ge.bind(null,e)],[p.clearButton,"click",we.bind(null,e)]]),this.views=[new ce(this),new he(this),new ue(this,{id:2,name:"years",cellClass:"year",step:1}),new ue(this,{id:3,name:"decades",cellClass:"decade",step:10})],this.currentView=this.views[t.startView],this.currentView.render(),this.main.appendChild(this.currentView.element),t.container?t.container.appendChild(this.element):i.after(this.element)}setOptions(e){Oe(this,e),this.views.forEach((t=>{t.init(e,!1)})),this.currentView.render()}detach(){this.element.remove()}show(){if(this.active)return;const{datepicker:e,element:t}=this,i=e.inputField;if(i){const n=Ve(i);n!==Ve(A(t))?t.dir=n:t.dir&&t.removeAttribute("dir"),this.place(),t.classList.add("active"),e.config.disableTouchKeyboard&&i.blur()}else t.classList.add("active");this.active=!0,fe(e,"show")}hide(){this.active&&(this.datepicker.exitEditMode(),this.element.classList.remove("active"),this.active=!1,fe(this.datepicker,"hide"))}place(){const{classList:e,style:t}=this.element;t.display="block";const{width:i,height:n}=this.element.getBoundingClientRect(),s=this.element.offsetParent;t.display="";const{config:a,inputField:r}=this.datepicker,{left:o,top:d,right:c,bottom:l,width:h,height:u}=r.getBoundingClientRect();let{x:f,y:p}=a.orientation,m=o,w=d;if(s!==document.body&&s){const e=s.getBoundingClientRect();m-=e.left-s.scrollLeft,w-=e.top-s.scrollTop}else m+=window.scrollX,w+=window.scrollY;const g=Be(r);let y=0,D=0,{clientWidth:k,clientHeight:b}=document.documentElement;if(g){const e=g.getBoundingClientRect();e.top>0&&(D=e.top),e.left>0&&(y=e.left),e.right<k&&(k=e.right),e.bottom<b&&(b=e.bottom)}let v=0;"auto"===f&&(o<y?(f="left",v=y-o):o+i>k?(f="right",k<c&&(v=k-c)):f="rtl"===Ve(r)?c-i<y?"left":"right":"left"),"right"===f&&(m+=h-i),m+=v,"auto"===p&&(p=d-n>D&&l+n>b?"top":"bottom"),"top"===p?w-=n:w+=u,e.remove(...Object.values(Ne)),e.add(Ne[f],Ne[p]),t.left=Se(m),t.top=Se(w)}setViewSwitchLabel(e){this.controls.viewSwitch.textContent=e}setPrevButtonDisabled(e){this.controls.prevButton.disabled=e}setNextButtonDisabled(e){this.controls.nextButton.disabled=e}changeView(e){const t=this.currentView;return e!==t.id&&(this._oldView||(this._oldView=t),this.currentView=this.views[e],this._renderMethod="render"),this}changeFocus(e){return this._renderMethod=Fe(this,e)?"render":"refreshFocus",this.views.forEach((e=>{e.updateFocus()})),this}update(e=void 0){const t=void 0===e?Ce(this.datepicker):e;return this._renderMethod=Fe(this,t)?"render":"refresh",this.views.forEach((e=>{e.updateFocus(),e.updateSelection()})),this}render(e=!0){const{currentView:t,datepicker:i,_oldView:n}=this,s=new Date(this._oldViewDate),a=e&&this._renderMethod||"render";if(delete this._oldView,delete this._oldViewDate,delete this._renderMethod,t[a](),n&&(this.main.replaceChild(t.element,n.element),fe(i,"changeView")),!isNaN(s)){const e=new Date(this.viewDate);e.getFullYear()!==s.getFullYear()&&fe(i,"changeYear"),e.getMonth()!==s.getMonth()&&fe(i,"changeMonth")}}}function Le(e,t,i,s,a,r){if(n(e,a,r)){if(s(e)){return Le(t(e,i),t,i,s,a,r)}return e}}function Ae(e,t,i){const n=e.picker,s=n.currentView,a=s.step||1;let r,o=n.viewDate;switch(s.id){case 0:o=l(o,i?7*t:t),r=l;break;case 1:o=h(o,i?4*t:t),r=h;break;default:o=u(o,t*(i?4:1)*a),r=u}o=Le(o,r,t<0?-a:a,(e=>s.disabled.includes(e)),s.minDate,s.maxDate),void 0!==o&&n.changeFocus(o).render()}function Ye(e,t){const{config:i,picker:n,editMode:s}=e,a=n.active,{key:r,altKey:o,shiftKey:d}=t,c=t.ctrlKey||t.metaKey,l=()=>{t.preventDefault(),t.stopPropagation()};if("Tab"===r)return void ye(e);if("Enter"===r){if(a)if(s)e.exitEditMode({update:!0,autohide:i.autohide});else{const t=n.currentView;t.isMinView?e.setDate(n.viewDate):(n.changeView(t.id-1).render(),l())}else e.update();return}const h=i.shortcutKeys,u={key:r,ctrlOrMetaKey:c,altKey:o,shiftKey:d},f=Object.keys(h).find((e=>{const t=h[e];return!Object.keys(t).find((e=>t[e]!==u[e]))}));if(f){let t;if("toggle"===f?t=f:s?"exitEditMode"===f&&(t=f):a?"hide"===f?t=f:"prevButton"===f?t=[pe,[e,-1]]:"nextButton"===f?t=[pe,[e,1]]:"viewSwitch"===f?t=[me,[e]]:i.clearButton&&"clearButton"===f?t=[we,[e]]:i.todayButton&&"todayButton"===f&&(t=[ge,[e]]):"show"===f&&(t=f),t)return Array.isArray(t)?t[0].apply(null,t[1]):e[t](),void l()}if(!a||s)return;const p=(i,n)=>{d||c||o?e.enterEditMode():(Ae(e,i,n),t.preventDefault())};"ArrowLeft"===r?p(-1,!1):"ArrowRight"===r?p(1,!1):"ArrowUp"===r?p(-1,!0):"ArrowDown"===r?p(1,!0):("Backspace"===r||"Delete"===r||r&&1===r.length&&!c)&&e.enterEditMode()}function We(e){e.config.showOnFocus&&!e._showing&&e.show()}function Ke(e,t){const i=t.target;(e.picker.active||e.config.showOnClick)&&(i._active=Y(i),i._clicking=setTimeout((()=>{delete i._active,delete i._clicking}),2e3))}function _e(e,t){const i=t.target;i._clicking&&(clearTimeout(i._clicking),delete i._clicking,i._active&&e.enterEditMode(),delete i._active,e.config.showOnClick&&e.show())}function Te(e,t){t.clipboardData.types.includes("text/plain")&&e.enterEditMode()}function He(e,t){const{element:i,picker:n}=e;if(!n.active&&!Y(i))return;const s=n.element;I(t,(e=>e===i||e===s))||ye(e)}function je(e,t){return e.map((e=>B(e,t.format,t.locale))).join(t.dateDelimiter)}function Re(e,t,i=!1){if(0===t.length)return i?[]:void 0;const{config:s,dates:a,rangeSideIndex:r}=e,{pickLevel:o,maxNumberOfDates:d}=s;let c=t.reduce(((e,t)=>{let i=V(t,s.format,s.locale);return void 0===i||(i=b(i,o,r),!n(i,s.minDate,s.maxDate)||e.includes(i)||s.checkDisabled(i,o)||!(o>0)&&s.daysOfWeekDisabled.includes(new Date(i).getDay())||e.push(i)),e}),[]);return 0!==c.length?(s.multidate&&!i&&(c=c.reduce(((e,t)=>(a.includes(t)||e.push(t),e)),a.filter((e=>!c.includes(e))))),d&&c.length>d?c.slice(-1*d):c):void 0}function $e(e,t=3,i=!0,n=void 0){const{config:s,picker:a,inputField:r}=e;if(2&t){const e=a.active?s.pickLevel:s.startView;a.update(n).changeView(e).render(i)}1&t&&r&&(r.value=je(e.dates,s))}function Ie(e,t,i){const n=e.config;let{clear:s,render:a,autohide:r,revert:o,forceRefresh:d,viewDate:c}=i;void 0===a&&(a=!0),a?void 0===r&&(r=n.autohide):r=d=!1,c=V(c,n.format,n.locale);const l=Re(e,t,s);(l||o)&&(l&&l.toString()!==e.dates.toString()?(e.dates=l,$e(e,a?3:1,!0,c),fe(e,"changeDate")):$e(e,d?3:1,!0,c),r&&e.hide())}function Pe(e,t){return t?i=>B(i,t,e.config.locale):e=>new Date(e)}return class{constructor(e,t={},n=void 0){e.datepicker=this,this.element=e,this.dates=[];const s=this.config=Object.assign({buttonClass:t.buttonClass&&String(t.buttonClass)||"button",container:null,defaultViewDate:d(),maxDate:void 0,minDate:void 0},ie(J,this));let a;if("INPUT"===e.tagName?(a=this.inputField=e,a.classList.add("datepicker-input"),t.container&&(s.container=t.container instanceof HTMLElement?t.container:document.querySelector(t.container))):s.container=e,n){const e=n.inputs.indexOf(a),t=n.datepickers;if(e<0||e>1||!Array.isArray(t))throw Error("Invalid rangepicker object.");t[e]=this,this.rangepicker=n,this.rangeSideIndex=e}this._options=t,Object.assign(s,ie(t,this)),s.shortcutKeys=function(e){return Object.keys(ne).reduce(((t,i)=>{const n=void 0===e[i]?ne[i]:e[i],s=n&&n.key;if(!s||"string"!=typeof s)return t;const a={key:s,ctrlOrMetaKey:!!(n.ctrlOrMetaKey||n.ctrlKey||n.metaKey)};return s.length>1&&(a.altKey=!!n.altKey,a.shiftKey=!!n.shiftKey),t[i]=a,t}),{})}(t.shortcutKeys||{});const r=i(e.value||e.dataset.date,s.dateDelimiter);delete e.dataset.date;const o=Re(this,r);o&&o.length>0&&(this.dates=o),a&&(a.value=je(this.dates,s));const c=this.picker=new Ee(this),l=[e,"keydown",Ye.bind(null,this)];a?R(this,[l,[a,"focus",We.bind(null,this)],[a,"mousedown",Ke.bind(null,this)],[a,"click",_e.bind(null,this)],[a,"paste",Te.bind(null,this)],[document,"mousedown",He.bind(null,this)],[window,"resize",c.place.bind(c)]]):(R(this,[l]),this.show())}static formatDate(e,t,i){return B(e,t,i&&P[i]||P.en)}static parseDate(e,t,i){return V(e,t,i&&P[i]||P.en)}static get locales(){return P}get active(){return!(!this.picker||!this.picker.active)}get pickerElement(){return this.picker?this.picker.element:void 0}setOptions(e){const t=ie(e,this);Object.assign(this._options,e),Object.assign(this.config,t),this.picker.setOptions(t),$e(this,3)}show(){if(this.inputField){const{config:e,inputField:t}=this;if(t.disabled||t.readOnly&&!e.enableOnReadonly)return;Y(t)||e.disableTouchKeyboard||(this._showing=!0,t.focus(),delete this._showing)}this.picker.show()}hide(){this.inputField&&(this.picker.hide(),this.picker.update().changeView(this.config.startView).render())}toggle(){this.picker.active?this.inputField&&this.picker.hide():this.show()}destroy(){this.hide(),function(e){let t=T.get(e);t&&(t.forEach((e=>{j.call(...e)})),T.delete(e))}(this),this.picker.detach();const e=this.element;return e.classList.remove("datepicker-input"),delete e.datepicker,this}getDate(e=void 0){const t=Pe(this,e);return this.config.multidate?this.dates.map(t):this.dates.length>0?t(this.dates[0]):void 0}setDate(...t){const i=[...t],n={},s=e(t);!s||"object"!=typeof s||Array.isArray(s)||s instanceof Date||Object.assign(n,i.pop());Ie(this,Array.isArray(i[0])?i[0]:i,n)}update(e=void 0){if(!this.inputField)return;const t=Object.assign(e||{},{clear:!0,render:!0,viewDate:void 0});Ie(this,i(this.inputField.value,this.config.dateDelimiter),t)}getFocusedDate(e=void 0){return Pe(this,e)(this.picker.viewDate)}setFocusedDate(e,t=!1){const{config:i,picker:n,active:s,rangeSideIndex:a}=this,r=i.pickLevel,o=V(e,i.format,i.locale);void 0!==o&&(n.changeFocus(b(o,r,a)),s&&t&&n.changeView(r),n.render())}refresh(e=void 0,t=!1){let i;e&&"string"!=typeof e&&(t=e,e=void 0),i="picker"===e?2:"input"===e?1:3,$e(this,i,!t)}enterEditMode(){const e=this.inputField;e&&!e.readOnly&&this.picker.active&&!this.editMode&&(this.editMode=!0,e.classList.add("in-edit"))}exitEditMode(e=void 0){if(!this.inputField||!this.editMode)return;const t=Object.assign({update:!1},e);delete this.editMode,this.inputField.classList.remove("in-edit"),t.update&&this.update(t)}}}();
\ No newline at end of file
diff --git a/src/scss/_buttons.scss b/src/scss/_buttons.scss
index 83c71332..a994dedf 100644
--- a/src/scss/_buttons.scss
+++ b/src/scss/_buttons.scss
@@ -1,5 +1,4 @@
 .btn {
-    @include card-shadow;
     background-color: #337ab7;
     border-color: #2e6da4;
     border: 1px solid transparent;
@@ -9,13 +8,54 @@
     font-family: inherit;
     cursor: pointer;
     text-decoration: none;
+    span.spinner {
+        margin: 1px 5px;
+        float: inline-end;
+    }
+    &:hover,
+    &:focus {
+        background-color: #2e6da4;
+    }
+    &:disabled {
+        background-color: #2e6da4;
+        color: #e8e8e8;
+        pointer-events: auto;
+        cursor: not-allowed;
+        text-shadow: none;
+    }
 }
 
-.btn.disabled {
-    background-color: #f1f1f1;
-    pointer-events: auto;
-    cursor: not-allowed;
-    text-shadow: none;
+.clear-btn {
+    @extend .btn;
+    background-color: white;
+    align-items: center;
+    border: 1.9px solid $element-border-color;
+    color: $default-text-color;
+    margin: auto 5px;
+    box-shadow: none;
+    display: inline-flex;
+    height: 40px;
+    padding: 0 10px;
+    &:hover,
+    &:focus,
+    &:disabled {
+        background-color: #f1f1f1;
+    }
+    &:disabled {
+        color: #707070;
+    }
+    img {
+        margin-right: 4px;
+    }
+}
+
+a.clear-btn {
+    height: 38px;
+    font-size: 0.9em;
+    &.htmx-request {
+        background-color: #f1f1f1;
+        pointer-events: none;
+    }
 }
 
 .dropdown-content {
@@ -52,34 +92,26 @@
     display: block;
     height: 40px;
     box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.5);
-    &:hover {
-        background-color: #2e6da4;
-    }
 }
 
-.clear-btn {
-    @extend .btn;
-    font-size: 0.9em;
-    background-color: white;
-    align-items: center;
-    border: 1.9px solid $element-border-color;
-    color: $default-text-color;
-    margin: auto 5px;
-    box-shadow: none;
-    display: inline-flex;
-    height: 40px;
-    padding: 0 10px;
-    &:hover {
-        background-color: #f1f1f1;
+.data-form {
+    button.btn,
+    button.clear-btn,
+    a.clear-btn {
+        height: 40px;
+        width: 120px;
+        margin: auto 5px;
     }
-    img {
-        margin-right: 4px;
+    button.clear-btn {
+        justify-content: center;
+    }
+    a.clear-btn {
+        justify-content: center;
+        width: 95px;
+        margin: auto 5px;
     }
 }
 
-a.clear-btn {
-    height: 38px;
-}
 .tag.clear-btn {
     height: 20px;
     color: $primary-color;
@@ -105,7 +137,12 @@ a.clear-btn {
     align-items: center;
 }
 
-.badge.tag.disabled {
+.badge.tag:disabled {
     pointer-events: auto;
     cursor: not-allowed;
 }
+
+.breadcrumb li.tag {
+    height: 15px;
+    padding: 5px;
+}
diff --git a/src/scss/_directives.scss b/src/scss/_directives.scss
index 4691d317..0d411e1c 100644
--- a/src/scss/_directives.scss
+++ b/src/scss/_directives.scss
@@ -16,6 +16,23 @@
             top: 20%;
         }
     }
+    ol {
+        margin-bottom: 1px;
+        padding-bottom: 0px;
+        padding-top: 0px;
+    }
+    .close-btn {
+      float: right;     
+    }
+    pre {
+        background-color: white;
+        padding: 5px 5px 5px 5px;
+        text-align: left;
+        text-wrap: wrap;
+        button {
+            float: right;
+        }
+    }
 }
 
 .directive.get-started {
diff --git a/src/scss/_input-forms.scss b/src/scss/_input-forms.scss
index dfb1d704..bd7be14f 100644
--- a/src/scss/_input-forms.scss
+++ b/src/scss/_input-forms.scss
@@ -1,9 +1,9 @@
 form {
     margin: 0 auto;
-    padding: 25px;
+    padding: 2em;
     border-radius: 12px;
     background-color: white;
-    @include default-shadow;
+    @include card-shadow;
     input {
         font-size: $font-medium;
         border: 1px solid $element-border-color;
@@ -19,33 +19,120 @@ form {
             outline-width: 2px;
         }
     }
+    input[type="date-picker"] {
+        @include input-icon("/public/icons/calendar.svg");
+        cursor: pointer;
+    }
+
+    .file-input {
+        width: 70%;
+        @include small-screen{
+            width: 95%;
+        }
+        margin: 5px auto;
+        input {
+            width: 100%;
+            cursor: pointer;
+        }
+    }
 
     select {
         @extend input;
         appearance: none;
         background-color: white;
         cursor: pointer;
-        /*drop down arrow*/
-        background-image: url("/public/images/dropdown.svg");
-        background-repeat: no-repeat;
-        background-position: right 0.7rem top 50%;
-        background-size: 1.25em auto;
+        @include input-icon("/public/icons/dropdown.svg");
     }
-}
 
-#form_authenticate {
-    font-size: $font-extra-large;
-    width: 550px;
-    @include mobile-only {
-        width: 80%;
+    &.data-form {
+        width: 700px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 50px;
+        .input-box {
+            margin-top: 15px;
+        }
+        section {
+            width: 100%;
+            margin-bottom: 1em;
+        }
+        input {
+            margin: 5px auto;
+        }
+        @include small-screen {
+            width: inherit;
+            padding: 15px 10px;
+            margin: 0px;
+            section {
+                width: 95%;
+            }
+        }
     }
-    input {
-        margin: 5px auto;
-        input[type="text"] {
-            margin-bottom: 20px;
+
+    .autocomplete-dropdown {
+        border: 1px solid $element-border-color;
+        border-radius: $border-radius;
+        background-color: white;
+        max-height: 200px;
+        min-width: 340px;
+        overflow-y: auto;
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        @include card-shadow;
+        z-index: 999;
+        a {
+            padding: 5px 10px;
+            cursor: pointer;
+            &:hover {
+                background-color: #337ab7;
+            }
         }
     }
-    select {
-        margin: 5px auto 20px auto;
+
+    &#form_authenticate {
+        font-size: $font-extra-large;
+        width: 550px;
+        @include default-shadow;
+        @include mobile-only {
+            width: 80%;
+        }
+        input {
+            margin: 5px auto;
+            input[type="text"] {
+                margin-bottom: 20px;
+            }
+        }
+        select {
+            margin: 5px auto 20px auto;
+        }
+    }
+
+    .check-box {
+        display: inline-flex;
+        align-items: center;
+        input {
+            width: fit-content;
+        }
+        label {
+            margin-left: 5px;
+            font-style: italic;
+            font-size: $font-small;
+        }
     }
+
+    .section-box {
+        margin-top: 2em;
+    }
+
+    .error-message {
+        padding: 10px;
+        border-radius: $border-radius;
+    }
+}
+
+.form-title {
+    text-align: center;
 }
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index 5e748430..db3b1d66 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -4,6 +4,12 @@
     }
 }
 
+@mixin small-screen {
+    @media (max-width: 767px) {
+        @content;
+    }
+}
+
 @mixin web-only {
     @media (min-width: $mobile-max-width) {
         @content;
@@ -24,3 +30,10 @@
     -moz-user-select: none;
     -ms-user-select: none;
 }
+
+@mixin input-icon($icon-url) {
+    background-image: url($icon-url);
+    background-repeat: no-repeat;
+    background-position: right 0.7rem top 50%;
+    background-size: 1.25em auto;
+}
diff --git a/src/scss/_spinner.scss b/src/scss/_spinner.scss
index caf7bf52..6a4292e0 100644
--- a/src/scss/_spinner.scss
+++ b/src/scss/_spinner.scss
@@ -1,41 +1,54 @@
+$spinner-width: 30px;
+$spinner-height: 30px;
+$spinner-height-sm: 15px;
+$spinner-width-sm: 15px;
 $spinner-color: $_gray-dark;
-$spinner-speed: .9s;
-$spinner-size: 10px;
+
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .spinner {
-    display: block;
-    margin: 1em auto;
-    font-size: $spinner-size;
-    position: relative;
-    border: 0.4em solid rgba($spinner-color, 0.2);
-    border-top-color: rgba($spinner-color,0.4);
-    -webkit-transform: translateZ(0);
-    -ms-transform: translateZ(0);
-    transform: translateZ(0);
-    -webkit-animation: loader $spinner-speed infinite linear;
-    animation: loader $spinner-speed infinite linear;
-    border-radius: 50%;
-    width: 3em;
-    height: 3em;
+  display: none;
+  width: $spinner-width;
+  height: $spinner-height;
+  vertical-align: text-bottom;
+  border: $spinner-width solid rgba($spinner-color, 0.4);
+  border-right-color: transparent;
+  border-width: 3px;
+  border-radius: 50%;
+  animation: spinner 0.75s linear infinite;
+  transition: opacity 0.85s ease-in;
+  &.htmx-request {
+    display: inline;
+  }
+}
+
+.spinner-sm {
+  @extend .spinner;
+  width: $spinner-width-sm;
+  height: $spinner-height-sm;
+  border-width: 2px;
+  &.btn-spinner {
+    border: $spinner-width solid white;
+    border-width: 2px;
+    border-right-color: transparent;
   }
+}
 
-@-webkit-keyframes loader {
-    0% {
-      -webkit-transform: rotate(0deg);
-      transform: rotate(0deg);
-    }
-    100% {
-      -webkit-transform: rotate(360deg);
-      transform: rotate(360deg);
-    }
+.spinner-container {
+  justify-content: center;
+  display: flex;
+  span,
+  div {
+    display: inline-block;
   }
-  
-  @keyframes loader {
-    0% {
-      -webkit-transform: rotate(0deg);
-      transform: rotate(0deg);
-    }
-    100% {
-      -webkit-transform: rotate(360deg);
-      transform: rotate(360deg);
-    }
-  }
\ No newline at end of file
+}
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index 15060df2..a50cb23e 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -99,6 +99,9 @@ img {
 .warning-text {
     color: $warning-color;
 }
+.white-text {
+    color: white;
+}
 
 .error-bg {
     background-color: $failure-color;

From 4d186d073614a0be9786ffe5e8bb77af58922da7 Mon Sep 17 00:00:00 2001
From: jonathanbataire <jonathanbataire@gmail.com>
Date: Tue, 4 Jun 2024 18:29:05 +0300
Subject: [PATCH 2/5] feedback

---
 src/liquid/place/create_form.html | 2 +-
 src/public/css/styles.css         | 2 +-
 src/scss/_input-forms.scss        | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/liquid/place/create_form.html b/src/liquid/place/create_form.html
index ae46c272..53ca2159 100644
--- a/src/liquid/place/create_form.html
+++ b/src/liquid/place/create_form.html
@@ -40,6 +40,6 @@
 
   <div>
     <button id="place_create_submit" class="btn">Save</button>
-    <a href="/" class="clear-btn" class="button">Cancel</a>
+    <a href="/" class="clear-btn">Cancel</a>
   </div>
 </form>
diff --git a/src/public/css/styles.css b/src/public/css/styles.css
index dbc41a1d..491e46e6 100644
--- a/src/public/css/styles.css
+++ b/src/public/css/styles.css
@@ -1 +1 @@
-@font-face{font-family:"Noto";src:url(/public/fonts/NotoSans-Regular.ttf) format("truetype");font-weight:normal}.theme,body{background-color:#fff;color:#333;font-family:Noto, sans-serif}.btn,.clear-btn,.login-btn{background-color:#337ab7;border-color:#2e6da4;border:1px solid transparent;color:white;border-radius:4px;font-size:1em;font-family:inherit;cursor:pointer;text-decoration:none}.btn span.spinner,.clear-btn span.spinner,.login-btn span.spinner,.btn span.spinner-sm,.clear-btn span.spinner-sm,.login-btn span.spinner-sm{margin:1px 5px;float:inline-end}.btn:hover,.clear-btn:hover,.login-btn:hover,.btn:focus,.clear-btn:focus,.login-btn:focus{background-color:#2e6da4}.btn:disabled,.clear-btn:disabled,.login-btn:disabled{background-color:#2e6da4;color:#e8e8e8;pointer-events:auto;cursor:not-allowed;text-shadow:none}.clear-btn{background-color:white;align-items:center;border:1.9px solid #ccc;color:#333;margin:auto 5px;box-shadow:none;display:inline-flex;height:40px;padding:0 10px}.clear-btn:hover,.clear-btn:focus,.clear-btn:disabled{background-color:#f1f1f1}.clear-btn:disabled{color:#707070}.clear-btn img{margin-right:4px}a.clear-btn{height:38px;font-size:0.9em}a.clear-btn.htmx-request{background-color:#f1f1f1;pointer-events:none}.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;font-size:0.9em;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);z-index:1}.dropdown-content a{color:#333;padding:12px 16px;text-decoration:none;display:block}.dropdown-content a:hover{background-color:#f1f1f1}.dropdown-button{width:fit-content}.dropdown-button:hover .dropdown-content{display:block}.login-btn{width:100%;margin:30px auto;display:block;height:40px;box-shadow:0px 4px 10px 0px rgba(0,0,0,0.5)}.data-form button.btn,.data-form button.clear-btn,.data-form button.login-btn,.data-form button.clear-btn,.data-form a.clear-btn{height:40px;width:120px;margin:auto 5px}.data-form button.clear-btn{justify-content:center}.data-form a.clear-btn{justify-content:center;width:95px;margin:auto 5px}.tag.clear-btn{height:20px;color:#007AC0;border-color:#007AC0}.badge.tag{border:none;border-radius:4px;height:20px;font-weight:normal;font-size:.8125rem;cursor:pointer}.badge.status{display:inline-flex;height:12px;border-radius:4px;font-weight:normal;font-size:.8125rem;justify-self:center;align-items:center}.badge.tag:disabled{pointer-events:auto;cursor:not-allowed}.breadcrumb li.tag{height:15px;padding:5px}form{margin:0 auto;padding:2em;border-radius:12px;background-color:white;box-shadow:0 4px 8px 0 rgba(0,0,0,0.2)}form input,form select{font-size:1rem;border:1px solid #ccc;border-radius:4px;padding:10px;width:100%;box-sizing:border-box}form input:focus,form select:focus{border:none;outline-style:solid;outline-color:#007AC0;box-shadow:0 0 4px 2px #007AC0;outline-width:2px}form input[type="date-picker"],form select[type="date-picker"]{background-image:url("/public/icons/calendar.svg");background-repeat:no-repeat;background-position:right 0.7rem top 50%;background-size:1.25em auto;cursor:pointer}form .file-input{width:70%;margin:5px auto}@media (max-width: 767px){form .file-input{width:95%}}form .file-input input,form .file-input select{width:100%;cursor:pointer}form select{appearance:none;background-color:white;cursor:pointer;background-image:url("/public/icons/dropdown.svg");background-repeat:no-repeat;background-position:right 0.7rem top 50%;background-size:1.25em auto}form.data-form{width:700px;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:50px}form.data-form .input-box{margin-top:15px}form.data-form section{width:100%;margin-bottom:1em}form.data-form input,form.data-form select{margin:5px auto}@media (max-width: 767px){form.data-form{width:inherit;padding:15px 10px;margin:0px}form.data-form section{width:95%}}form .autocomplete-dropdown{border:1px solid #ccc;border-radius:4px;background-color:white;max-height:200px;min-width:340px;overflow-y:auto;position:absolute;display:flex;flex-direction:column;box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);z-index:999}form .autocomplete-dropdown a{padding:5px 10px;cursor:pointer}form .autocomplete-dropdown a:hover{background-color:#337ab7}form#form_authenticate{font-size:1.25rem;width:550px;box-shadow:0 10px 20px 0 rgba(0,0,0,0.1)}@media (max-width: 1023px){form#form_authenticate{width:80%}}form#form_authenticate input,form#form_authenticate select{margin:5px auto}form#form_authenticate input input[type="text"],form#form_authenticate select input[type="text"],form#form_authenticate input select[type="text"],form#form_authenticate select select[type="text"]{margin-bottom:20px}form#form_authenticate select{margin:5px auto 20px auto}form .check-box{display:inline-flex;align-items:center}form .check-box input,form .check-box select{width:fit-content}form .check-box label{margin-left:5px;font-style:italic;font-size:.875rem}form .section-box{margin-top:2em}form .error-message{padding:10px;border-radius:4px}.form-title{text-align:center}.navbar{background-color:white;display:flex;position:fixed;top:0;left:0;width:100%;height:3.5em;align-items:center;box-sizing:border-box;padding:10px 15px;z-index:1000}@media (max-width: 1023px){.navbar{padding:10px 10px}}.navbar .navbar-branding{font-size:1.25rem;font-weight:bold;margin-right:10px}.navbar .navbar-branding img{width:100%;height:1.5em}@media (max-width: 1023px){.navbar #logo.navbar-branding{display:none}}.navbar #title.navbar-branding{display:none}@media (max-width: 1023px){.navbar #title.navbar-branding{display:block}}.navbar ul{list-style-type:none;margin-left:auto;padding:0;display:flex;cursor:pointer}.navbar a{text-decoration:none}.navbar .dropdown{position:relative}@media (min-width: 1023px){.navbar .dropdown:hover .dropdown-menu{display:block;visibility:visible}}.navbar .dropdown ul{width:200px}@media (max-width: 1023px){.navbar .dropdown ul{width:300px}}.navbar .dropdown img{margin:auto 8px;width:20px;height:20px}.navbar .dropdown #dropdown-btn{display:flex;align-items:center}@media (max-width: 1023px){.navbar .dropdown #dropdown-btn{display:none}}.navbar .dropdown-menu{box-shadow:0 10px 20px 0 rgba(0,0,0,0.1);position:absolute;border-radius:4px;top:100%;right:0;padding:10px;background-color:#fff;height:fit-content;border:1px solid #ccc;display:none;visibility:hidden}@media (max-width: 1023px){.navbar .dropdown-menu{top:150%}}.navbar .dropdown-menu li{color:#333;display:flex;align-items:center;height:2em}.navbar .dropdown-menu img{margin:auto 6px auto 0px}.navbar .hamburger-icon{display:none}@media (max-width: 1023px){.navbar .hamburger-icon{width:28px;height:28px;display:flex;padding:0px;flex-direction:column;justify-content:space-around;align-items:center;cursor:pointer}.navbar .hamburger-icon span{width:100%;height:2px;background-color:#333;transition:0.2s}}.navbar .open span:nth-child(1){transform:rotate(45deg) translate(6.5px, 6px)}.navbar .open span:nth-child(2){opacity:0}.navbar .open span:nth-child(3){transform:rotate(-45deg) translate(6.5px, -6px)}.navbar .active-dropdown{display:block;visibility:visible}@keyframes spinner{to{transform:rotate(360deg)}}@-webkit-keyframes spinner{to{transform:rotate(360deg)}}.spinner,.spinner-sm{display:none;width:30px;height:30px;vertical-align:text-bottom;border:30px solid rgba(119,119,119,0.4);border-right-color:transparent;border-width:3px;border-radius:50%;animation:spinner 0.75s linear infinite;transition:opacity 0.85s ease-in}.spinner.htmx-request,.htmx-request.spinner-sm{display:inline}.spinner-sm{width:15px;height:15px;border-width:2px}.spinner-sm.btn-spinner{border:30px solid white;border-width:2px;border-right-color:transparent}.spinner-container{justify-content:center;display:flex}.spinner-container span,.spinner-container div{display:inline-block}.table-container{overflow-x:auto;display:flex;margin:0.5em 5px 1em 5px;width:auto;border-radius:8px}.table-container table{border-collapse:collapse;border-spacing:0;width:100%;max-width:100%}.table-container table a{color:#337ab7;text-decoration:none}.table-container table a:hover,.table-container table a:focus{color:#23527c;text-decoration:underline}.table-container table td{font-size:0.95em}.table-container table td:last-child{position:sticky;position:-webkit-sticky;right:0}.table-container table th,.table-container table td{text-align:left;padding:15px}.table-container table th{font-size:.875rem;background-color:rgba(220,220,220,0.6);border-bottom:1px solid #ccc}.table-container table th a{cursor:pointer}.table-container table th a:hover,.table-container table th a:focus{text-decoration:none}.table-container table th a:first-child{padding-right:3px}.table-container table th.header-actions{text-align:right}.table-container table tr:nth-child(even){background-color:#f2f2f2}.table-container table .action-link{cursor:pointer;z-index:-1}.table-container table .action-link:hover,.table-container table .action-link:focus{filter:brightness(0);text-decoration:none}@media (max-width: 600px){.table-container{box-shadow:none}.table-container table{table-layout:fixed}.table-container table thead{display:none}.table-container table tr:nth-child(even){background-color:white}.table-container table td{border-left:1px solid #ddd;border-right:1px solid #ddd;background-color:#f2f2f2;display:block;text-align:right;border-top:none}.table-container table td .empty{padding:15px}.table-container table td::before{content:attr(data-label);float:left}.table-container table td:last-child{margin-bottom:1em;border-bottom:1px solid #ddd;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.table-container table td:first-child{border-top:1px solid #ddd;border-top-left-radius:4px;border-top-right-radius:4px}}.pagination{display:inline-flex;font-size:.875rem;width:100%;justify-content:center;margin:0 auto 70px auto}.pagination button{background-color:white;border:none;width:40px;font-size:1.25rem;cursor:pointer}.pagination a{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;color:black;float:left;margin:auto 1px;padding:8px 16px;text-decoration:none;border-radius:4px;border:1px solid #ccc;cursor:pointer;display:none}.pagination a:nth-child(-n+4),.pagination a.collapse{display:block}.pagination a:nth-last-child(-n+3){display:block}.pagination a.active{background-color:#007AC0;display:block;color:white;border:1px solid #007AC0}.pagination a:hover:not(.active){background-color:#f1f1f1}.pagination .pager-control{display:inline-flex;justify-content:center;align-items:center;margin-left:20px;height:inherit;font-size:.875rem;float:right}.pagination .pager-control span{margin-right:5px}.pagination .pager-control select{font-size:.875rem;background-color:white;border:1px solid #ccc;border-radius:4px;padding:auto;height:inherit}.topnav{overflow-x:auto;background-color:white;max-height:10em;display:flex;border-bottom:1px solid #ccc;position:sticky;position:-webkit-sticky;top:3.4em;z-index:900}.topnav a{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;font-size:1rem;cursor:pointer;float:left;display:block;color:#545454;text-align:center;padding:14px 17px;text-decoration:none}@media (max-width: 1023px){.topnav a{font-size:.875rem}}.topnav a:hover{color:black}.topnav .active{border-bottom:3px solid #007AC0;color:black}.topnav .active span{background-color:#007AC0}.nav-content h2{margin-left:5px}.directive{background-color:#f5f5f5;margin:1em auto;min-height:3em;padding:10px 25px}.directive h3{margin:5px auto}@media (max-width: 1023px){.directive{font-size:0.9em;padding:10px}}.directive .prompt-save a{float:right;top:20%}.directive ol{margin-bottom:1px;padding-bottom:0px;padding-top:0px}.directive .close-btn{float:right}.directive pre{background-color:white;padding:5px 5px 5px 5px;text-align:left;text-wrap:wrap}.directive pre button{float:right}.directive.get-started{box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);background-color:#f5f5f5;font-size:1.25rem;padding-bottom:40px;text-align:center;border-radius:#ccc;margin:7em 7em;display:flex;flex-direction:column;justify-content:center;align-items:center}.directive.get-started p{max-width:40%}.directive.get-started span{font-size:1.75rem}.directive.get-started .directive-dropdown{display:flex}@media (max-width: 1023px){.directive.get-started{margin:7em 5px;padding:10px 10px 30px 10px}.directive.get-started p{width:90%;max-width:none}.directive.get-started button{font-size:1rem}}.hidden-tag-container{margin-top:10px;font-size:0.95em}.login-page{background-color:#F8F8F8}.container{margin:0 auto;padding-top:0.4em}.border{border:1px solid blue}.actions{display:flex;justify-content:flex-end;padding:10px}.actions .top,.actions .bottom{display:flex;align-items:center;width:fit-content}@media (max-width: 600px){.actions{padding:0;flex-direction:column;width:100%}.actions button,.actions a{width:14em;margin:2px}.actions .top{order:1;width:inherit;justify-content:center;margin:5px auto 3px auto}.actions .bottom{order:2;width:inherit;justify-content:center}}.content{padding-top:3em;margin:auto;width:98%}.center{margin:1em}.hidden{display:none}.active{display:block}img{vertical-align:middle}.error{color:#da4548;text-align:center;display:none;font-size:1rem}.error-text{color:#f14668}.success-text{color:#48c78e}.staging-text{color:#007AC0}.warning-text{color:#ffe08a}.white-text{color:white}.error-bg{background-color:#f14668}.success-bg{background-color:#48c78e}.staging-bg{background-color:#007AC0}.warning-bg{background-color:#ffe08a;color:#333}.striped-bg{background:repeating-linear-gradient(135deg, #606dbc, #606dbc 5px, #465298 5px, #465298 10px)}.logo{width:60%;margin:30px auto 40px auto;display:block}.login-branding{width:400px;margin:0 auto}@media (max-width: 1023px){.login-branding{width:85%}}.login-branding p{text-align:center;font-size:1.5rem;font-weight:bold}progress{width:100%;height:15px;margin:10px auto;background-color:white;border-radius:10px;overflow:hidden}progress::-webkit-progress-bar{background-color:white;border-radius:10px}progress::-moz-progress-bar{background-color:#007AC0}progress::-webkit-progress-value{background-color:#007AC0;border-radius:10px;transition:width 1s ease}
+@font-face{font-family:"Noto";src:url(/public/fonts/NotoSans-Regular.ttf) format("truetype");font-weight:normal}.theme,body{background-color:#fff;color:#333;font-family:Noto, sans-serif}.btn,.clear-btn,.login-btn{background-color:#337ab7;border-color:#2e6da4;border:1px solid transparent;color:white;border-radius:4px;font-size:1em;font-family:inherit;cursor:pointer;text-decoration:none}.btn span.spinner,.clear-btn span.spinner,.login-btn span.spinner,.btn span.spinner-sm,.clear-btn span.spinner-sm,.login-btn span.spinner-sm{margin:1px 5px;float:inline-end}.btn:hover,.clear-btn:hover,.login-btn:hover,.btn:focus,.clear-btn:focus,.login-btn:focus{background-color:#2e6da4}.btn:disabled,.clear-btn:disabled,.login-btn:disabled{background-color:#2e6da4;color:#e8e8e8;pointer-events:auto;cursor:not-allowed;text-shadow:none}.clear-btn{background-color:white;align-items:center;border:1.9px solid #ccc;color:#333;margin:auto 5px;box-shadow:none;display:inline-flex;height:40px;padding:0 10px}.clear-btn:hover,.clear-btn:focus,.clear-btn:disabled{background-color:#f1f1f1}.clear-btn:disabled{color:#707070}.clear-btn img{margin-right:4px}a.clear-btn{height:38px;font-size:0.9em}a.clear-btn.htmx-request{background-color:#f1f1f1;pointer-events:none}.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;font-size:0.9em;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);z-index:1}.dropdown-content a{color:#333;padding:12px 16px;text-decoration:none;display:block}.dropdown-content a:hover{background-color:#f1f1f1}.dropdown-button{width:fit-content}.dropdown-button:hover .dropdown-content{display:block}.login-btn{width:100%;margin:30px auto;display:block;height:40px;box-shadow:0px 4px 10px 0px rgba(0,0,0,0.5)}.data-form button.btn,.data-form button.clear-btn,.data-form button.login-btn,.data-form button.clear-btn,.data-form a.clear-btn{height:40px;width:120px;margin:auto 5px}.data-form button.clear-btn{justify-content:center}.data-form a.clear-btn{justify-content:center;width:95px;margin:auto 5px}.tag.clear-btn{height:20px;color:#007AC0;border-color:#007AC0}.badge.tag{border:none;border-radius:4px;height:20px;font-weight:normal;font-size:.8125rem;cursor:pointer}.badge.status{display:inline-flex;height:12px;border-radius:4px;font-weight:normal;font-size:.8125rem;justify-self:center;align-items:center}.badge.tag:disabled{pointer-events:auto;cursor:not-allowed}.breadcrumb li.tag{height:15px;padding:5px}form{margin:0 auto;padding:2em;border-radius:12px;background-color:white;box-shadow:0 4px 8px 0 rgba(0,0,0,0.2)}form input,form select{font-size:1rem;border:1px solid #ccc;border-radius:4px;padding:10px;width:100%;box-sizing:border-box}form input:focus,form select:focus{border:none;outline-style:solid;outline-color:#007AC0;box-shadow:0 0 4px 2px #007AC0;outline-width:2px}form input[type="date-picker"],form select[type="date-picker"]{background-image:url("/public/icons/calendar.svg");background-repeat:no-repeat;background-position:right 0.7rem top 50%;background-size:1.25em auto;cursor:pointer}form .file-input{width:70%;margin:5px auto}@media (max-width: 767px){form .file-input{width:95%}}form .file-input input,form .file-input select{width:100%;cursor:pointer}form select{appearance:none;background-color:white;cursor:pointer;background-image:url("/public/icons/dropdown.svg");background-repeat:no-repeat;background-position:right 0.7rem top 50%;background-size:1.25em auto}form.data-form{width:700px;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:50px}form.data-form .input-box{margin-top:15px}form.data-form section{width:100%;margin-bottom:1em}form.data-form input,form.data-form select{margin:5px auto}@media (max-width: 767px){form.data-form{width:inherit;padding:15px 10px;margin:0px}form.data-form section{width:95%}}form .autocomplete-dropdown{border:1px solid #ccc;border-radius:4px;background-color:white;max-height:200px;min-width:340px;overflow-y:auto;position:absolute;display:flex;flex-direction:column;box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);z-index:999}form .autocomplete-dropdown a{padding:5px 10px;cursor:pointer}form .autocomplete-dropdown a:hover{background-color:#007AC0}form#form_authenticate{font-size:1.25rem;width:550px;box-shadow:0 10px 20px 0 rgba(0,0,0,0.1)}@media (max-width: 1023px){form#form_authenticate{width:80%}}form#form_authenticate input,form#form_authenticate select{margin:5px auto}form#form_authenticate input input[type="text"],form#form_authenticate select input[type="text"],form#form_authenticate input select[type="text"],form#form_authenticate select select[type="text"]{margin-bottom:20px}form#form_authenticate select{margin:5px auto 20px auto}form .check-box{display:inline-flex;align-items:center}form .check-box input,form .check-box select{width:fit-content}form .check-box label{margin-left:5px;font-style:italic;font-size:.875rem}form .section-box{margin-top:2em}form .error-message{padding:10px;border-radius:4px}.form-title{text-align:center}.navbar{background-color:white;display:flex;position:fixed;top:0;left:0;width:100%;height:3.5em;align-items:center;box-sizing:border-box;padding:10px 15px;z-index:1000}@media (max-width: 1023px){.navbar{padding:10px 10px}}.navbar .navbar-branding{font-size:1.25rem;font-weight:bold;margin-right:10px}.navbar .navbar-branding img{width:100%;height:1.5em}@media (max-width: 1023px){.navbar #logo.navbar-branding{display:none}}.navbar #title.navbar-branding{display:none}@media (max-width: 1023px){.navbar #title.navbar-branding{display:block}}.navbar ul{list-style-type:none;margin-left:auto;padding:0;display:flex;cursor:pointer}.navbar a{text-decoration:none}.navbar .dropdown{position:relative}@media (min-width: 1023px){.navbar .dropdown:hover .dropdown-menu{display:block;visibility:visible}}.navbar .dropdown ul{width:200px}@media (max-width: 1023px){.navbar .dropdown ul{width:300px}}.navbar .dropdown img{margin:auto 8px;width:20px;height:20px}.navbar .dropdown #dropdown-btn{display:flex;align-items:center}@media (max-width: 1023px){.navbar .dropdown #dropdown-btn{display:none}}.navbar .dropdown-menu{box-shadow:0 10px 20px 0 rgba(0,0,0,0.1);position:absolute;border-radius:4px;top:100%;right:0;padding:10px;background-color:#fff;height:fit-content;border:1px solid #ccc;display:none;visibility:hidden}@media (max-width: 1023px){.navbar .dropdown-menu{top:150%}}.navbar .dropdown-menu li{color:#333;display:flex;align-items:center;height:2em}.navbar .dropdown-menu img{margin:auto 6px auto 0px}.navbar .hamburger-icon{display:none}@media (max-width: 1023px){.navbar .hamburger-icon{width:28px;height:28px;display:flex;padding:0px;flex-direction:column;justify-content:space-around;align-items:center;cursor:pointer}.navbar .hamburger-icon span{width:100%;height:2px;background-color:#333;transition:0.2s}}.navbar .open span:nth-child(1){transform:rotate(45deg) translate(6.5px, 6px)}.navbar .open span:nth-child(2){opacity:0}.navbar .open span:nth-child(3){transform:rotate(-45deg) translate(6.5px, -6px)}.navbar .active-dropdown{display:block;visibility:visible}@keyframes spinner{to{transform:rotate(360deg)}}@-webkit-keyframes spinner{to{transform:rotate(360deg)}}.spinner,.spinner-sm{display:none;width:30px;height:30px;vertical-align:text-bottom;border:30px solid rgba(119,119,119,0.4);border-right-color:transparent;border-width:3px;border-radius:50%;animation:spinner 0.75s linear infinite;transition:opacity 0.85s ease-in}.spinner.htmx-request,.htmx-request.spinner-sm{display:inline}.spinner-sm{width:15px;height:15px;border-width:2px}.spinner-sm.btn-spinner{border:30px solid white;border-width:2px;border-right-color:transparent}.spinner-container{justify-content:center;display:flex}.spinner-container span,.spinner-container div{display:inline-block}.table-container{overflow-x:auto;display:flex;margin:0.5em 5px 1em 5px;width:auto;border-radius:8px}.table-container table{border-collapse:collapse;border-spacing:0;width:100%;max-width:100%}.table-container table a{color:#337ab7;text-decoration:none}.table-container table a:hover,.table-container table a:focus{color:#23527c;text-decoration:underline}.table-container table td{font-size:0.95em}.table-container table td:last-child{position:sticky;position:-webkit-sticky;right:0}.table-container table th,.table-container table td{text-align:left;padding:15px}.table-container table th{font-size:.875rem;background-color:rgba(220,220,220,0.6);border-bottom:1px solid #ccc}.table-container table th a{cursor:pointer}.table-container table th a:hover,.table-container table th a:focus{text-decoration:none}.table-container table th a:first-child{padding-right:3px}.table-container table th.header-actions{text-align:right}.table-container table tr:nth-child(even){background-color:#f2f2f2}.table-container table .action-link{cursor:pointer;z-index:-1}.table-container table .action-link:hover,.table-container table .action-link:focus{filter:brightness(0);text-decoration:none}@media (max-width: 600px){.table-container{box-shadow:none}.table-container table{table-layout:fixed}.table-container table thead{display:none}.table-container table tr:nth-child(even){background-color:white}.table-container table td{border-left:1px solid #ddd;border-right:1px solid #ddd;background-color:#f2f2f2;display:block;text-align:right;border-top:none}.table-container table td .empty{padding:15px}.table-container table td::before{content:attr(data-label);float:left}.table-container table td:last-child{margin-bottom:1em;border-bottom:1px solid #ddd;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.table-container table td:first-child{border-top:1px solid #ddd;border-top-left-radius:4px;border-top-right-radius:4px}}.pagination{display:inline-flex;font-size:.875rem;width:100%;justify-content:center;margin:0 auto 70px auto}.pagination button{background-color:white;border:none;width:40px;font-size:1.25rem;cursor:pointer}.pagination a{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;color:black;float:left;margin:auto 1px;padding:8px 16px;text-decoration:none;border-radius:4px;border:1px solid #ccc;cursor:pointer;display:none}.pagination a:nth-child(-n+4),.pagination a.collapse{display:block}.pagination a:nth-last-child(-n+3){display:block}.pagination a.active{background-color:#007AC0;display:block;color:white;border:1px solid #007AC0}.pagination a:hover:not(.active){background-color:#f1f1f1}.pagination .pager-control{display:inline-flex;justify-content:center;align-items:center;margin-left:20px;height:inherit;font-size:.875rem;float:right}.pagination .pager-control span{margin-right:5px}.pagination .pager-control select{font-size:.875rem;background-color:white;border:1px solid #ccc;border-radius:4px;padding:auto;height:inherit}.topnav{overflow-x:auto;background-color:white;max-height:10em;display:flex;border-bottom:1px solid #ccc;position:sticky;position:-webkit-sticky;top:3.4em;z-index:900}.topnav a{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;font-size:1rem;cursor:pointer;float:left;display:block;color:#545454;text-align:center;padding:14px 17px;text-decoration:none}@media (max-width: 1023px){.topnav a{font-size:.875rem}}.topnav a:hover{color:black}.topnav .active{border-bottom:3px solid #007AC0;color:black}.topnav .active span{background-color:#007AC0}.nav-content h2{margin-left:5px}.directive{background-color:#f5f5f5;margin:1em auto;min-height:3em;padding:10px 25px}.directive h3{margin:5px auto}@media (max-width: 1023px){.directive{font-size:0.9em;padding:10px}}.directive .prompt-save a{float:right;top:20%}.directive ol{margin-bottom:1px;padding-bottom:0px;padding-top:0px}.directive .close-btn{float:right}.directive pre{background-color:white;padding:5px 5px 5px 5px;text-align:left;text-wrap:wrap}.directive pre button{float:right}.directive.get-started{box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);background-color:#f5f5f5;font-size:1.25rem;padding-bottom:40px;text-align:center;border-radius:#ccc;margin:7em 7em;display:flex;flex-direction:column;justify-content:center;align-items:center}.directive.get-started p{max-width:40%}.directive.get-started span{font-size:1.75rem}.directive.get-started .directive-dropdown{display:flex}@media (max-width: 1023px){.directive.get-started{margin:7em 5px;padding:10px 10px 30px 10px}.directive.get-started p{width:90%;max-width:none}.directive.get-started button{font-size:1rem}}.hidden-tag-container{margin-top:10px;font-size:0.95em}.login-page{background-color:#F8F8F8}.container{margin:0 auto;padding-top:0.4em}.border{border:1px solid blue}.actions{display:flex;justify-content:flex-end;padding:10px}.actions .top,.actions .bottom{display:flex;align-items:center;width:fit-content}@media (max-width: 600px){.actions{padding:0;flex-direction:column;width:100%}.actions button,.actions a{width:14em;margin:2px}.actions .top{order:1;width:inherit;justify-content:center;margin:5px auto 3px auto}.actions .bottom{order:2;width:inherit;justify-content:center}}.content{padding-top:3em;margin:auto;width:98%}.center{margin:1em}.hidden{display:none}.active{display:block}img{vertical-align:middle}.error{color:#da4548;text-align:center;display:none;font-size:1rem}.error-text{color:#f14668}.success-text{color:#48c78e}.staging-text{color:#007AC0}.warning-text{color:#ffe08a}.white-text{color:white}.error-bg{background-color:#f14668}.success-bg{background-color:#48c78e}.staging-bg{background-color:#007AC0}.warning-bg{background-color:#ffe08a;color:#333}.striped-bg{background:repeating-linear-gradient(135deg, #606dbc, #606dbc 5px, #465298 5px, #465298 10px)}.logo{width:60%;margin:30px auto 40px auto;display:block}.login-branding{width:400px;margin:0 auto}@media (max-width: 1023px){.login-branding{width:85%}}.login-branding p{text-align:center;font-size:1.5rem;font-weight:bold}progress{width:100%;height:15px;margin:10px auto;background-color:white;border-radius:10px;overflow:hidden}progress::-webkit-progress-bar{background-color:white;border-radius:10px}progress::-moz-progress-bar{background-color:#007AC0}progress::-webkit-progress-value{background-color:#007AC0;border-radius:10px;transition:width 1s ease}
diff --git a/src/scss/_input-forms.scss b/src/scss/_input-forms.scss
index bd7be14f..ddd1c518 100644
--- a/src/scss/_input-forms.scss
+++ b/src/scss/_input-forms.scss
@@ -87,7 +87,7 @@ form {
             padding: 5px 10px;
             cursor: pointer;
             &:hover {
-                background-color: #337ab7;
+                background-color: $primary-color;
             }
         }
     }

From 48b4413c2255d55c4ef1672ecf5ea4dc9d13f30f Mon Sep 17 00:00:00 2001
From: jonathanbataire <jonathanbataire@gmail.com>
Date: Thu, 6 Jun 2024 10:15:21 +0300
Subject: [PATCH 3/5] clean up errors

---
 src/liquid/app/view.html               | 11 ++++++++++-
 src/liquid/place/bulk_create_form.html | 13 ++-----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/liquid/app/view.html b/src/liquid/app/view.html
index d62d60db..2ab7b44d 100644
--- a/src/liquid/app/view.html
+++ b/src/liquid/app/view.html
@@ -32,4 +32,13 @@
   </div>
 </body>
 
-</html>
\ No newline at end of file
+</html>
+
+<script>
+  function clearErrorMsg(elementID) {
+    const errMsg = document.getElementById(elementID);
+    if (errMsg){
+      errMsg.style.display = 'none';
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/src/liquid/place/bulk_create_form.html b/src/liquid/place/bulk_create_form.html
index 3aa54521..7afa8ffa 100644
--- a/src/liquid/place/bulk_create_form.html
+++ b/src/liquid/place/bulk_create_form.html
@@ -1,10 +1,11 @@
 <form id="form_place_create" class="data-form" hx-encoding='multipart/form-data' autocomplete="off"
   hx-post="/place?op=bulk&type={{contactType.name}}" hx-disabled-elt="button#place_create_submit, a#cancel"
+  hx-on="htmx:beforeRequest:clearErrorMsg('bulk-upload-error')"
   hx-indicator="#upload-spinner" hx-target="this" hx-swap="outerHTML">
   <input name="place_type" value="{{contactType.name}}" hidden />
 
   {% if errors %}
-  <div class="error-bg white-text error-message">
+  <div id="bulk-upload-error" class="error-bg white-text error-message">
     {{errors.message}}
   </div>
   {% endif %}
@@ -82,13 +83,3 @@
     download="{{contactType.name}}.tmpl.csv">Download Template</a>
   </div>
 </form>
-
-<script>
-  const fileInput = document.querySelector('#bulk-upload-file input[type=file]');
-  fileInput.onchange = () => {
-    if (fileInput.files.length > 0) {
-      const fileName = document.querySelector('#bulk-upload-file .file-name');
-      fileName.textContent = fileInput.files[0].name;
-    }
-  }
-</script>
\ No newline at end of file

From 524916618764039b3072ca4f1c328cdd44efb645 Mon Sep 17 00:00:00 2001
From: jonathanbataire <jonathanbataire@gmail.com>
Date: Thu, 6 Jun 2024 10:34:24 +0300
Subject: [PATCH 4/5] clean up

---
 src/css/custom-bootstrap.css | 30 ++++++++++++++++++++++--------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/css/custom-bootstrap.css b/src/css/custom-bootstrap.css
index 7ed101eb..6696a752 100644
--- a/src/css/custom-bootstrap.css
+++ b/src/css/custom-bootstrap.css
@@ -1,14 +1,11 @@
 /*!
  * Generated using the Bootstrap Customizer (https://getbootstrap.com/docs/3.4/customize/)
- */
-/*!
+ */ /*!
  * Bootstrap v3.4.1 (https://getbootstrap.com/)
  * Copyright 2011-2019 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
-/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
-
-.badge {
+ */ /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+ .badge {
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -54,7 +51,6 @@ a.badge:focus {
 .nav-pills > li > a > .badge {
   margin-left: 3px;
 }
-
 .tooltip {
   position: absolute;
   z-index: 1070;
@@ -168,4 +164,22 @@ a.badge:focus {
   height: 0;
   border-color: transparent;
   border-style: solid;
-}
\ No newline at end of file
+}
+.breadcrumb {
+  padding: 8px 15px;
+  margin-bottom: 20px;
+  list-style: none;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+.breadcrumb > li {
+  display: inline-block;
+}
+.breadcrumb > li + li:before {
+  padding: 0 5px;
+  color: inherit;
+  content: ">";
+}
+.breadcrumb > .active {
+  color: #777777;
+}

From 4c8d57ca55fae5b799e8ee181ac985783e873273 Mon Sep 17 00:00:00 2001
From: jonathanbataire <jonathanbataire@gmail.com>
Date: Fri, 7 Jun 2024 10:56:23 +0300
Subject: [PATCH 5/5] fix indentation

---
 src/liquid/app/form_switch.html        | 18 ++++-----
 src/liquid/components/move_result.html | 17 +++++----
 src/liquid/place/bulk_create_form.html | 52 +++++++++++++-------------
 3 files changed, 44 insertions(+), 43 deletions(-)

diff --git a/src/liquid/app/form_switch.html b/src/liquid/app/form_switch.html
index 87f51983..d142bc31 100644
--- a/src/liquid/app/form_switch.html
+++ b/src/liquid/app/form_switch.html
@@ -1,11 +1,11 @@
 <div id="place_form_parent">
   {% capture header_caption %}
-  {% if op == "bulk" %} Bulk Load from CSV
-  {% elsif op == "replace"%} Replace Existing
-  {% elsif op == "move"%} Move
-  {% elsif op == "edit" %} Edit
-  {% else %} New
-  {% endif %}
+    {% if op == "bulk" %} Bulk Load from CSV
+    {% elsif op == "replace"%} Replace Existing
+    {% elsif op == "move"%} Move
+    {% elsif op == "edit" %} Edit
+    {% else %} New
+    {% endif %}
   {% endcapture %}
 
   <h3 class="form-title">
@@ -13,10 +13,10 @@ <h3 class="form-title">
   </h3>
 
   {% if op == "bulk" %}
-  {% include "place/bulk_create_form.html" %}
+    {% include "place/bulk_create_form.html" %}
   {% elsif op == "move" %}
-  {% include "place/move_form.html" %}
+    {% include "place/move_form.html" %}
   {% else %}
-  {% include "place/create_form.html" %}
+    {% include "place/create_form.html" %}
   {% endif %}
 </div>
\ No newline at end of file
diff --git a/src/liquid/components/move_result.html b/src/liquid/components/move_result.html
index 7adced7e..4f7f64f3 100644
--- a/src/liquid/components/move_result.html
+++ b/src/liquid/components/move_result.html
@@ -4,19 +4,20 @@
     <ol class="breadcrumb">
       <li class="tag badge warning-bg">Current</li>
       {% for lineage in fromLineage %}
-      {% if lineage %}
-      <li class="breadcrumb-item"><a href="https://{{ session.authInfo.domain }}/#/contacts/{{ lineage.id}}">{{
-          lineage.name }}</a></li>
-      {% endif %}
+        {% if lineage %}
+        <li class="breadcrumb-item"><a href="https://{{ session.authInfo.domain }}/#/contacts/{{ lineage.id}}">
+          {{ lineage.name }}</a></li>
+        {% endif %}
       {% endfor %}
     </ol>
     <ol class="breadcrumb">
       <li class="tag badge success-bg">After</li>
       {% for lineage in toLineage %}
-      {% if lineage %}
-      <li class="breadcrumb-item"><a href="https://{{ session.authInfo.domain }}/#/contacts/{{ lineage.id}}">{{
-          lineage.name }}</a></li>
-      {% endif %}
+        {% if lineage %}
+          <li class="breadcrumb-item"><a href="https://{{ session.authInfo.domain }}/#/contacts/{{ lineage.id}}">
+            {{ lineage.name }}
+          </a></li>
+        {% endif %}
       {% endfor %}
       <li class="breadcrumb-item" active>{{ fromLineage.last.name }}</li>
     </ol>
diff --git a/src/liquid/place/bulk_create_form.html b/src/liquid/place/bulk_create_form.html
index 7afa8ffa..515df755 100644
--- a/src/liquid/place/bulk_create_form.html
+++ b/src/liquid/place/bulk_create_form.html
@@ -38,41 +38,41 @@
         </tr>
 
         {% for row in contactType.hierarchy %}
-        <tr>
-          <td data-label="Expected Column">{{ row.friendly_name }}</td>
-          <td data-label="Required">{{ row.required }}</td>
-          <td data-label="Description">Name of place {{ row.level }} above in hierarchy</td>
-        </tr>
+          <tr>
+            <td data-label="Expected Column">{{ row.friendly_name }}</td>
+            <td data-label="Required">{{ row.required }}</td>
+            <td data-label="Description">Name of place {{ row.level }} above in hierarchy</td>
+          </tr>
         {% endfor %}
 
         {% for row in contactType.place_properties %}
-        {% if row.type != 'generated' %}
-        <tr>
-          <td data-label="Expected Column">{{ row.friendly_name }}</td>
-          <td data-label="Required">{{ row.required }}</td>
-          <td data-label="Description">Property on place</td>
-        </tr>
-        {% endif %}
+          {% if row.type != 'generated' %}
+            <tr>
+              <td data-label="Expected Column">{{ row.friendly_name }}</td>
+              <td data-label="Required">{{ row.required }}</td>
+              <td data-label="Description">Property on place</td>
+            </tr>
+          {% endif %}
         {% endfor %}
 
         {% for row in contactType.contact_properties %}
-        {% if row.type != 'generated' %}
-        <tr>
-          <td data-label="Expected Column">{{ row.friendly_name }}</td>
-          <td data-label="Required">{{ row.required }}</td>
-          <td data-label="Description">Property on primary contact</td>
-        </tr>
-        {% endif %}
+          {% if row.type != 'generated' %}
+            <tr>
+              <td data-label="Expected Column">{{ row.friendly_name }}</td>
+              <td data-label="Required">{{ row.required }}</td>
+              <td data-label="Description">Property on primary contact</td>
+            </tr>
+          {% endif %}
         {% endfor %}
 
         {% if contactType.user_role.size > 1 %}
-        <tr>
-          <td data-label="Expected Column">{{ userRoleProperty.friendly_name }}</td>
-          <td data-label="Required">{{ userRoleProperty.required }}</td>
-          <td data-label="Description">Role of the user. Separate multiple roles with a <i>space</i>. Allowed roles are <i>{{
-              contactType.user_role | join: ', ' }}
-          </td>
-        </tr>
+          <tr>
+            <td data-label="Expected Column">{{ userRoleProperty.friendly_name }}</td>
+            <td data-label="Required">{{ userRoleProperty.required }}</td>
+            <td data-label="Description">Role of the user. Separate multiple roles with a <i>space</i>. Allowed roles are <i>
+              {{ contactType.user_role | join: ', ' }}
+            </td>
+          </tr>
         {% endif %}
       </tbody>
     </table>