{% extends 'projects/base_project.html' %}
{% load crispy_forms_tags %}

{% block title %}{{ automation.name }} - {{ block.super }}{% endblock %}

{% block content_project %}

<div class="row">
    {% include 'projects/automations/_menu.html' with active_section='config' %}

    <!-- Right column: main content -->
    <div class="col-md-9 col-sm-8">
        <form method="post" id="automation-form" action="{% url 'automation_configuration' org_name=request.current_organization.name project_name=project.name automation=automation_url_name %}">
            {% csrf_token %}
            {{ form.configuration_json }}
            {{ form.trigger_type }}

            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Automation details</h3>
                    <div class="box-tools pull-right">
                        {{ form.is_enabled|as_crispy_field }}
                    </div>
                </div>
                <div class="box-body">
                    {{ form.name|as_crispy_field }}
                </div>
                <div class="box-footer">
                    <button type="submit" class="btn btn-primary pull-right">Save</button>
                </div>
            </div>

            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Conditions</h3>
                </div>
                <div class="box-body">

            {% if is_report_automation %}
            <div class="automation-section">
                <div class="section-header">
                    <span class="section-label">SCHEDULE</span>
                    <span class="section-description trigger-description-inline">
                        Collect matching CVEs over a
                        <select name="frequency" id="id_frequency" class="form-control trigger-frequency-select select2" required>
                            <option value="daily" {% if automation.frequency == 'daily' %}selected{% endif %}>Daily</option>
                            <option value="weekly" {% if automation.frequency == 'weekly' %}selected{% endif %}>Weekly</option>
                        </select>
                        period in the
                        {{ form.schedule_timezone }}
                        timezone
                    </span>
                </div>
                {% if form.schedule_timezone.errors %}
                <p class="text-danger">{{ form.schedule_timezone.errors.0 }}</p>
                {% endif %}
                {% if form.frequency.errors %}
                <p class="text-danger">{{ form.frequency.errors.0 }}</p>
                {% endif %}
            </div>
            {% endif %}

            {% if is_alert_automation %}
            <div class="automation-section" id="when-section">
                <div class="section-header">
                    <span class="section-label">WHEN</span>
                    <span class="section-description">one or more of these events occur</span>
                </div>
                <div id="triggers-container"></div>
                <select class="add-dropdown select2" id="add-trigger-dropdown" data-placeholder="Add event...">
                    <option value="">Add event...</option>
                </select>
            </div>
            {% endif %}

            <div id="conditions-section">
                <div class="automation-section">
                    <div class="condition-group" data-group-index="0">
                        <div class="section-header">
                            <span class="section-label">{% if is_report_automation %}SCOPE{% else %}IF{% endif %}</span>
                            <span class="section-sublabel">optional</span>
                            <span class="section-description">all of these conditions match</span>
                        </div>
                        <div class="group-conditions"></div>
                        <select class="add-dropdown select2 add-condition-dropdown" data-placeholder="Add optional filter..." data-group-index="0">
                            <option value="">Add optional filter...</option>
                        </select>
                    </div>
                    <button type="button" class="btn btn-default btn-add-or-group" id="add-or-group-btn">
                        <i class="fa fa-plus"></i> Add OR group
                    </button>
                </div>
                <div id="condition-groups-container"></div>
                <template id="condition-group-or-template">
                    <div class="automation-section">
                        <div class="condition-group" data-group-index="">
                            <div class="section-header section-header-with-remove">
                                <span class="section-label">OR {% if is_report_automation %}SCOPE{% else %}IF{% endif %}</span>
                                <span class="section-description">all of these conditions match</span>
                                <button type="button" class="btn btn-sm btn-default btn-remove-or-group" title="Remove this OR group">
                                    <i class="fa fa-trash"></i> Remove OR group
                                </button>
                            </div>
                            <div class="group-conditions"></div>
                            <select class="add-dropdown select2 add-condition-dropdown" data-placeholder="Add optional filter..." data-group-index="">
                                <option value="">Add optional filter...</option>
                            </select>
                        </div>
                    </div>
                </template>
            </div>

            <div class="automation-section">
                <div class="section-header">
                    <span class="section-label">THEN</span>
                    {% if is_report_automation %}
                    <span class="section-sublabel">optional</span>
                    {% endif %}
                    {% if is_report_automation %}
                    <span class="section-description trigger-description-inline">
                        Run these actions
                        <span id="weekly-day-container" class="trigger-weekday-inline" {% if automation.frequency != 'weekly' and form.frequency.value != 'weekly' %}style="display:none"{% endif %}>
                            every
                            <select name="schedule_weekday" id="id_schedule_weekday" class="form-control trigger-weekday-select select2">
                                {% for day_key, day_label in form.schedule_weekday.field.choices %}
                                    {% with selected_day=form.schedule_weekday.value|default:automation.schedule_weekday|default:'monday' %}
                                    <option value="{{ day_key }}" {% if selected_day == day_key %}selected{% endif %}>{{ day_label }}</option>
                                    {% endwith %}
                                {% endfor %}
                            </select>
                        </span>
                        at
                        <input
                            type="time"
                            name="schedule_time"
                            id="id_schedule_time"
                            class="form-control trigger-inline-time"
                            value="{{ form.schedule_time.value|time:'H:i'|default:'09:00' }}"
                            step="3600"
                            required
                        >
                    </span>
                    {% else %}
                    <span class="section-description">perform these actions</span>
                    {% endif %}
                </div>
                {% if is_report_automation %}
                {% if form.schedule_time.errors %}
                <p class="text-danger">{{ form.schedule_time.errors.0 }}</p>
                {% endif %}
                {% if form.schedule_weekday.errors %}
                <p class="text-danger">{{ form.schedule_weekday.errors.0 }}</p>
                {% endif %}
                {% endif %}
                <div id="actions-container"></div>
                <select class="add-dropdown select2" id="add-action-dropdown" data-placeholder="Add action...">
                    <option value="">Add action...</option>
                </select>
            </div>

            {% if form.configuration_json.errors %}
            <p class="text-danger automation-config-errors">{{ form.configuration_json.errors.0 }}</p>
            {% endif %}
            <div id="automation-config-errors" class="text-danger automation-config-errors" style="display:none;"></div>
            <button type="submit" class="btn btn-primary pull-right">Save</button>
                </div>
            </div>
        </form>

        <div class="box box-danger">
            <div class="box-header with-border">
                <h3 class="box-title">Delete this automation</h3>
            </div>
            <div class="box-body">
                <p>Permanently remove this automation and its configuration.</p>
                <a href="{% url 'delete_automation' org_name=request.current_organization.name project_name=project.name automation=automation_url_name %}" class="btn btn-danger">Delete</a>
            </div>
        </div>
    </div>
</div>

<script>
var automationData = {{ automation_data_json|safe }};
var automationOptions = {
    notifications: [{% for n in notifications %}{id: "{{ n.id }}", name: "{{ n.name|escapejs }}"}{% if not forloop.last %},{% endif %}{% endfor %}],
    users: [{% for u in organization_members %}{id: "{{ u.id }}", name: "{{ u.username|escapejs }}"}{% if not forloop.last %},{% endif %}{% endfor %}],
    statuses: [{% for k, v in status_choices %}{id: "{{ k }}", name: "{{ v|escapejs }}"}{% if not forloop.last %},{% endif %}{% endfor %}]
};
var automationTriggerType = "{{ automation.trigger_type }}";
</script>

{% endblock %}