{% extends 'generic/object_edit.html' %}
{% load i18n %}

{% block content %}
  <div class="alert alert-info mb-3">
    {% trans "Device type" %}: <a href="{{ object.device_type.get_absolute_url }}">{{ object.device_type }}</a>
  </div>
  {{ block.super }}
{% endblock %}

{% block head %}
  {{ block.super }}
  <style>
    /* Bootstrap's default "disabled" gray is too subtle to clearly distinguish
       the fields that are irrelevant for the selected shape (rectangle/circle). */
    #id_width:disabled, #id_depth:disabled, #id_diameter:disabled {
      background-color: #e1e9f0 !important;
      opacity: 0.8;
    }
  </style>
{% endblock %}

{% block javascript %}
  {{ block.super }}
  <script>
    (function () {
      function refreshShapeFieldsAvailability() {
        var shapeSelect = document.getElementById('id_shape');
        var widthInput = document.getElementById('id_width');
        var depthInput = document.getElementById('id_depth');
        var diameterInput = document.getElementById('id_diameter');
        if (!shapeSelect) return;
        var isCircle = shapeSelect.value === 'circle';
        [widthInput, depthInput].forEach(function (input) {
          if (input) input.disabled = isCircle;
        });
        if (diameterInput) diameterInput.disabled = !isCircle;
      }
      document.addEventListener('DOMContentLoaded', function () {
        var shapeSelect = document.getElementById('id_shape');
        if (shapeSelect) shapeSelect.addEventListener('change', refreshShapeFieldsAvailability);
        refreshShapeFieldsAvailability();
      });
    })();
  </script>
{% endblock %}