django template for Editing Tag information

device_item_security_form.html

{% extends 'base.html' %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

{% block content %}
<style>
table {
  font-size: 100%;
  border-collapse: collapse; /* collapse the borders between cells */
}
td {
    white-space: nowrap;
    border: 1px solid black; /* add border to table cells */
    padding: 5px; /* add padding to table cells */
    font-size: 130%;
    width: 70%;
}
th {
    border: 1px solid black; /* add border to table header cells */
    padding: 5px; /* add padding to table header cells */
}
body {
    font-size: 100%;
}
.wide-input {
  width: 100%;
}
.ui-datepicker {
  background-color: black;
  color: white;
}
.ui-datepicker th {
  color: white;
}

  /* Add a CSS class to hide the row */
  .hidden-row {
    display: none;
  }

.ui-datepicker {
  background-color: black;
  color: white;
}
.ui-datepicker th {
  color: white;
}

</style>

<script>
      $(function() {
        $("#custom_start_date").datepicker({
          dateFormat: "yy-mm-dd"
        });
      });
</script>

<form method="post">
    {% csrf_token %}
   <h4><b>Edit Security Table</b>
<button type="submit" class="btn btn-primary">Save</button></h4>
    <table>
        <tr>
            <th>Username</th>
	    {% if user.is_staff %}
               <td>{{ form.username }}</td>
	    {% else %}   
               <td style="pointer-events: none;">{{ form.username }}</td>
	    {% endif %}   
        </tr>
        <tr>
            <th>Serial Number</th>
            {% if user.is_staff %}	    
               <td>{{ form.Serial_Number }}</td>
	    {% else %}   
               <td style="pointer-events: none;">{{ form.Serial_Number }}</td>
	    {% endif %}   
        </tr>
        <tr>
           <th><label for="{{ form.category.id_for_label }}">Category:</label></th>
         <td>
            {{ form.category }}
         </td>
        </tr>
        <tr>
            <th>Description</th>
            <td>{{ form.Description }}</td>
        </tr>
        <tr class="{% if not user.is_superuser %}hidden-row{% endif %}">
            <th>Tag Type</th>
              <td>
                {% for radio in form.Tag_Type %}
                  <div class="radio">
                    <label>
                      {{ radio.tag }}
                      {{ radio.choice_label }}
                    </label>
                  </div>
                {% endfor %}
              </td>
        </tr>

          <tr class="{% if not user.is_superuser %}hidden-row{% endif %}">

            <th>Notification Type</th>
              <td>
                {% for radio in form.alert_notification_type %}
                  <div class="radio">
                    <label>
                      {{ radio.tag }}
                      {{ radio.choice_label }}
                    </label>
                  </div>
                {% endfor %}
              </td>
        </tr>

        <tr class="{% if not user.is_superuser %}hidden-row{% endif %}">
            <th>Email Address</th>
               <td>{{ form.alert_email_notify_address }}</td>
        </tr>
        <tr class="{% if not user.is_superuser %}hidden-row{% endif %}">
            <th>SMS Phone #</th>
               <td>{{ form.alert_SMS_notify_address }}</td>
        </tr>

        <tr class="{% if not user.is_superuser %}hidden-row{% endif %}">
           <th>Tag Status</th>
            <td>
                {% for radio in form.tag_status %}
                  <div class="radio">
                    <label>
                      {{ radio.tag }}
                      {{ radio.choice_label }}
                    </label>
                  </div>
                {% endfor %}
            </td>
        </tr>
        <tr class="{% if not user.is_superuser %}hidden-row{% endif %}">
            <th>Alert Status Arrive/Depart</th>
            <td>
                {% for radio in form.alert_status_arrive_depart %}
                  <div class="radio">
                    <label>
                      {{ radio.tag }}
                      {{ radio.choice_label }}
                    </label>
                  </div>
                {% endfor %}
            </td>
        </tr>
        <tr class="{% if not user.is_superuser %}hidden-row{% endif %}">
            <th>Alert Status Lost/Found</th>
            <td>
                {% for radio in form.alert_status_lost_found %}
                  <div class="radio">
                    <label>
                      {{ radio.tag }}
                      {{ radio.choice_label }}
                    </label>
                  </div>
                {% endfor %}
            </td>
        </tr>
        <tr class="{% if not user.is_superuser %}hidden-row{% endif %}">
            <th>Alert Status Battery</th>
            <td>
                {% for radio in form.alert_status_battery %}
                  <div class="radio">
                    <label>
                      {{ radio.tag }}
                      {{ radio.choice_label }}
                    </label>
                  </div>
                {% endfor %}
            </td>
        </tr>
        <tr class="{% if not user.is_superuser %}hidden-row{% endif %}">
            <th>CPU Alert(MacBooks Only)</th>
            <td>
                {% for radio in form.alert_cpu_percent %}
                  <div class="radio">
                    <label>
                      {{ radio.tag }}
                      {{ radio.choice_label }}
                    </label>
                  </div>
                {% endfor %}
            </td>
        </tr>
        <tr class="{% if not user.is_superuser %}hidden-row{% endif %}">
            <th>Disk Space Alert(MacBooks Only)</th>
            <td>
                {% for radio in form.alert_disk_space %}
                  <div class="radio">
                    <label>
                      {{ radio.tag }}
                      {{ radio.choice_label }}
                    </label>
                  </div>
                {% endfor %}
            </td>
        </tr>

        <tr class="{% if not user.is_superuser %}hidden-row{% endif %}">

            <th>Attributes</th>
	    <td>
                <select name="Attributes">
                <option value="0" {% if form.instance.Attributes == "0" %}selected{% endif %}>0=Normal</option>
                <option value="1" {% if form.instance.Attributes == "1" %}selected{% endif %}>1=Extended</option>
                <option value="H" {% if form.instance.Attributes == "H" %}selected{% endif %}>H=Hidden</option>
                <option value="C" {% if form.instance.Attributes == "C" %}selected{% endif %}>C=Part of Check List</option>
                </select>		
	    </td>
        </tr>
        <tr>
            <th>Home Latitude ie. 43.9</th>
            <td>{{ form.Lat }}</td>
        </tr>
        <tr>
            <th>Home Longitude ie.-79.3</th>
            <td>{{ form.Long }}</td>
        </tr>
        <tr>
            <th>Battery Start Date YYYY-MM-DD</th>
            <td>{{ form.battery_start_date }}</td>
        </tr>  
        <!-- <tr class="{% if not user.is_superuser %}hidden-row{% endif %}">
            <th>Feeder ip address</th>
            <td>{{ form.tag_defined_ip_address }}</td>
        </tr>  -->
        <tr class="{% if not user.is_superuser %}hidden-row{% endif %}">
            <th>Billing Start Date</th>
            <td>{{ form.start_date }}</td>
        <tr class="{% if not user.is_superuser %}hidden-row{% endif %}">
            <th>Feeder Server</th>
            <td>{{ form.feeder }}</td>
        </tr>  
    </table>
</form>
{% endblock %}