{% extends "horizon/common/_modal_form.html" %}
{% load i18n %}

{% block modal-body-right %}
  <h3>{% trans "Description:" %}</h3>
  <p>{% trans "Creates an audit template with specified parameters." %}</p>
  <p>
    <span>{% trans "Define the optimization goal to achieve, among those which are available." %}</span>
    <span>{% trans "Optionally, you can select the strategy used to achieve your goal. If not set, a strategy will be automatically selected among those which can be used for your goal" %}</span>
  </p>
  <h3>{% trans "Audit scope:" %}</h3>
  <p>{% trans "Creates an audit template with specified parameters." %}</p>

<p class="scope-example-yaml">
    {% trans "YAML example:" %}
    ---
     - compute:
       - host_aggregates:
         - id: 1
         - id: 2
         - id: 3
       - availability_zones:
         - name: AZ1
         - name: AZ2
       - exclude:
         - instances:
           - uuid: UUID1
          - uuid: UUID2
         - compute_nodes:
           - name: compute1
  </p>
  <p>
    {% trans "JSON example:" %}
    [{'compute':
        [{'host_aggregates': [
             {'id': 1},
             {'id': 2},
             {'id': 3}]},
         {'availability_zones': [
             {'name': 'AZ1'},
             {'name': 'AZ2'}]},
         {'exclude': [
             {'instances': [
                 {'uuid': 'UUID1'},
                 {'uuid': 'UUID2'}
             ]},
             {'compute_nodes': [
                 {'name': 'compute1'}
             ]}
        ]}]
    }]
</p>
{% endblock %}

{% block modal-footer %}
  {{ block.super }}
  <script>
    (function() {
      function resetStrategies() {
        var strategySelect = document.getElementById('id_strategy');
        if (!strategySelect) { return; }
        strategySelect.innerHTML = '';
        var defaultOption = document.createElement('option');
        defaultOption.value = '';
        defaultOption.textContent = '{{ _('Select Strategy') }}';
        strategySelect.appendChild(defaultOption);
      }

      function loadStrategies(goalUuid) {
        var strategySelect = document.getElementById('id_strategy');
        if (!strategySelect) { return; }
        resetStrategies();
        if (!goalUuid) { return; }

        var url = "{% url 'horizon:admin:audit_templates:get_strategies_for_goal' %}" + '?goal_uuid=' + encodeURIComponent(goalUuid);
        fetch(url, { credentials: 'same-origin' })
          .then(function(resp) { return resp.json(); })
          .then(function(data) {
            if (!data || data.error) { return; }
            (data.strategies || []).forEach(function(s) {
              var opt = document.createElement('option');
              opt.value = s.uuid;
              opt.textContent = s.display_name || s.uuid;
              strategySelect.appendChild(opt);
            });
          })
          .catch(function(err) { if (window.console) { console.error(err); } });
      }

      // Use jQuery to ensure binding works in AJAX-loaded modals
      if (window.jQuery) {
        (function($) {
          $(document).on('change', '#id_goal', function() {
            loadStrategies(this.value);
          });
          // Trigger once after modal content is inserted
          $(function() {
            var pre = $('#id_goal').val();
            loadStrategies(pre);
          });
        })(window.jQuery);
      } else {
        // Fallback without jQuery
        document.addEventListener('change', function(e) {
          if (e.target && e.target.id === 'id_goal') {
            loadStrategies(e.target.value);
          }
        });
        // Initial load
        var el = document.getElementById('id_goal');
        loadStrategies(el ? el.value : '');
      }
    })();
  </script>
{% endblock %}
