{% extends "layouts/base.html" %}
{% from 'helpers/_forms.html' import render_field %}

{% block title %} New Stacks {% endblock %}

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}
{% block content %}
<main class="content">

    {% include 'includes/navigation.html' %}

    <div class="py-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
                <li class="breadcrumb-item"><a href="#"><span class="fas fa-home"></span></a></li>
                <li class="breadcrumb-item"><a href="/stacks-list">Stacks</a></li>
                <li class="breadcrumb-item active" aria-current="page">New</li>
            </ol>
        </nav>
        <div class="d-flex justify-content-between w-100 flex-wrap">
            <div class="mb-3 mb-lg-0">
                <h1 class="h4">Deploy Stack</h1>
                <p class="mb-0">Add reusable stacks or modules built to provide easy way to deployment infra</p>
            </div>
            <div>
                <a href="" class="btn btn-outline-gray"><i class="far fa-question-circle mr-1"></i> Stack Docs</a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12 mb-4">
            <div class="card border-light shadow-sm components-section">
                <div class="card-body">
                    <div class="row mb-4">
                        <div class="col-lg-4 col-sm-6">
                            <!-- Form -->
                            <div class="col-md-12 col-md-offset-1">
                                <h3>Stack {{ stack['json']['stack_name'] }}</h3>
                                <form class="" method="post" id="vars_form">


                                    <div class="form-group">
                                        {{ render_field(form.deploy_name, autocomplete="off", class='form-control', placeholder='Deploy name') }}
                                    </div>
                                    {% set aws_squad_status_before = [] %}
                                    <!-- Specific AWS account  -->
                                    {% if "aws" in stack['json']['stack_name']  %}
                                    {% for aws_account in aws_content %}
                                    {% set __ = aws_squad_status_before.append(aws_account.squad) %}
                                    {% endfor %}
                                    <div class="form-group">
                                        <h6><strong>Squad</strong></h6>
                                        <select class="form-control" name=squad v-model="squad">
                                            {% for aws_squad in aws_squad_status_before|unique %}
                                            <option value={{ aws_squad }}>{{ aws_squad }}</option>
                                            {% endfor %}
                                        </select>
                                        </label>
                                    </div>

                                    {% set aws_env_status_before = [] %}
                                    {% for aws_account in aws_content %}
                                    {% set __ = aws_env_status_before.append(aws_account.environment) %}
                                    {% endfor %}
                                    <div class="form-group">
                                        <h6><strong>Environment</strong></h6>
                                        <select class="form-control" name=environment v-model="environment">
                                            {% for aws_env in aws_env_status_before|unique %}
                                            <option value={{ aws_env }}>{{ aws_env }}</option>
                                            {% endfor %}
                                        </select>
                                        </label>
                                    </div>
                                    {% endif %}
                                    <!-- Specific GCP account  -->
                                    {% set gcp_squad_status_before = [] %}
                                    {% if "gcp" in  stack['json']['stack_name'] %}
                                    {% for gcp_account in gcp_content %}
                                    {% set __ = gcp_squad_status_before.append(gcp_account.squad) %}
                                    {% endfor %}
                                    <div class="form-group">
                                        <h6><strong>Squad</strong></h6>
                                        <select class="form-control" name=squad v-model="squad">
                                            {% for gcp_squad in gcp_squad_status_before|unique %}
                                            <option value={{ gcp_squad }}>{{ gcp_squad }}</option>
                                            {% endfor %}
                                        </select>
                                        </label>
                                    </div>

                                    {% set gcp_env_status_before = [] %}
                                    {% for gcp_account in gcp_content %}
                                    {% set __ = gcp_env_status_before.append(gcp_account.environment) %}
                                    {% endfor %}
                                    <div class="form-group">
                                        <h6><strong>Environment</strong></h6>
                                        <select class="form-control" name=environment v-model="environment">
                                            {% for gcp_env in gcp_env_status_before|unique %}
                                            <option value={{ gcp_env }}>{{ gcp_env }}</option>
                                            {% endfor %}
                                        </select>
                                        </label>
                                    </div>
                                    {% endif %}
                                    <!-- Specific AZURE account  -->
                                    {% set azure_squad_status_before = [] %}
                                    {% if "azure" in stack['json']['stack_name'] %}
                                    {% for azure_account in azure_content %}
                                    {% set __ = azure_squad_status_before.append(azure_account.squad) %}
                                    {% endfor %}
                                    <div class="form-group">
                                        <h6><strong>Squad</strong></h6>
                                        <select class="form-control" name=squad v-model="squad">
                                            {% for azure_squad in azure_squad_status_before|unique %}
                                            <option value={{ azure_squad }}>{{ azure_squad }}</option>
                                            {% endfor %}
                                        </select>
                                        </label>
                                    </div>

                                    {% set azure_env_status_before = [] %}
                                    {% for azure_account in azure_content %}
                                    {% set __ = azure_env_status_before.append(azure_account.environment) %}
                                    {% endfor %}
                                    <div class="form-group">
                                        <h6><strong>Environment</strong></h6>
                                        <select class="form-control" name=environment v-model="environment">
                                            {% for azure_env in azure_env_status_before|unique %}
                                            <option value={{ azure_env }}>{{ azure_env }}</option>
                                            {% endfor %}
                                        </select>
                                        </label>
                                    </div>
                                    {% endif %}

                                  <!-- Specific CUSTOM PROVIDER account  -->
                                    {% set custom_squad_status_before = [] %}
                                    {% if "custom" in  stack['json']['stack_name'] %}
                                    {% for custom_account in custom_content %}
                                    {% set __ = custom_squad_status_before.append(custom_account.squad) %}
                                    {% endfor %}
                                    <div class="form-group">
                                        <h6><strong>Squad</strong></h6>
                                        <select class="form-control" name=squad v-model="squad">
                                            {% for custom_squad in custom_squad_status_before|unique %}
                                            <option value={{ custom_squad }}>{{ custom_squad }}</option>
                                            {% endfor %}
                                        </select>
                                        </label>
                                    </div>

                                    {% set custom_env_status_before = [] %}
                                    {% for custom_account in custom_content %}
                                    {% set __ = custom_env_status_before.append(custom_account.environment) %}
                                    {% endfor %}
                                    <div class="form-group">
                                        <h6><strong>Environment</strong></h6>
                                        <select class="form-control" name=environment v-model="environment">
                                            {% for custom_env in custom_env_status_before|unique %}
                                            <option value={{ custom_env }}>{{ custom_env }}</option>
                                            {% endfor %}
                                        </select>
                                        </label>
                                    </div>
                                    {% endif %}


                                    <div class="form-group">
                                        {{ render_field(form.start_time, autocomplete="off",
                                        class='form-control', value='30 7 * * 0-4') }}
                                    </div>

                                    <div class="form-group">
                                        {{ render_field(form.destroy_time, autocomplete="off",
                                        class='form-control', value='30 18 * * 0-4') }}
                                    </div>

                                    <div class="form-group">
                                        {{ render_field(form.branch, autocomplete="off",
                                        class='form-control', placeholder='Branch name',
                                        value=stack['json']['branch']) }}
                                    </div>
                                    <div class="form-group">
                                        {{ render_field(form.project_path, autocomplete="off",
                                        class='form-control', placeholder='project path',
                                        value=stack['json']['project_path']) }}
                                    </div>
                                <p>
                                <a class="btn btn-primary" data-toggle="collapse"
                                   data-target="#variables" href="#collapseExample"
                                   role="button" aria-expanded="false" aria-controls="collapseExample">
                                   Use Variables Form
                                </a>
                                <button class="btn btn-primary" type="button" data-toggle="collapse"
                                 data-target="#tfvars" aria-expanded="false" aria-controls="collapseExample">
                                   Use custom tfvars file
                                </button>
                                </p>
                                    <!-- Collapse Tfvars -->
                                <div class="collapse" id="tfvars">
                                <h3>Tfvars</h3>
                                <footer class="blockquote-footer">
                                 Indicates the path and name of the tfvar file
                                </footer>
                                    <div class="border-top my-4"></div>
                                    <div class="form-group">
                                        {{ render_field(form.tfvar_file, autocomplete="off",
                                        class='form-control', value='') }}
                                    </div>
                                <div class="border-top my-4"></div>
                                    <button type="submit" class="btn w-100 btn-success" name="button" value=plan"
                                        action="{{url_for('.list_deploys')}}">
                                        Plan
                                    </button>
                                </button>
                                </div>
                                </div>
                                    <!-- Collapse Variables -->
                                <div class="collapse" id="variables">
                                    <div class="border-top my-4"></div>
                                    <!-- start SLD_SORT VARS -->
                                    {% if not sort_form %}
{% set basic_variables = {} %}
{% set advanced_variables = {} %}

{% for key, value in data_json.items() %}
    {% if value.get('default') is none %}
        {% set _ = basic_variables.update({key: value}) %}
    {% else %}
        {% set _ = advanced_variables.update({key: value}) %}
    {% endif %}
{% endfor %}

<!-- Basic Variables -->
<div class="basic-variables-section">
    <h4>Basic Variables</h4>
    {% for key, value in basic_variables.items() %}
        <div class="form-group">
            <p class="mb-110"><h6><strong>{{ key }}</strong></h6></p>
            <footer class="blockquote-footer">{{ value.get('description', "").split('|')[-1] }}</footer>

            {% set field_type = value.get('type', 'string') %}
            {% if field_type == "bool" %}
                <select name={{ key }} class='form-control'>
                    <option value="true" {% if value.get("default") %} selected {% endif %}>True</option>
                    <option value="false" {% if not value.get("default") %} selected {% endif %}>False</option>
                </select>
            {% elif field_type.startswith("map") or "object" in field_type %}
                <textarea  name={{ key }} class='form-control' rows="6" required>
            {{ value.get("default") | tojson | replace(",", ",\n") | replace("{", "{\n") | replace("}", "\n}") | trim | indent(4) }}
                </textarea>
            {% else %}
                <input type="text" value="{{ value.get('default', "") }}" name={{ key }} class='form-control' required>
            {% endif %}
        </div>
    {% endfor %}
</div>
<hr>
<!-- Advanced Variables -->
<form onsubmit="return cleanFormData()">
<div class="advanced-variables-section">
    <h4 class="toggle-advanced" style="cursor:pointer;">
        Advanced Variables <i id="advanced-icon" class="fas fa-chevron-down" style="font-size: 16px;"></i>
    </h4>
    <div id="advanced-variables-content" style="display:none;">
        {% for key, value in advanced_variables.items() %}
            <div class="form-group">
            <p class="mb-110"><h6><strong>{{ key }}</strong></h6></p>
            <footer class="blockquote-footer">{{ value.get('description', "").split('|')[-1] }}</footer>

            {% set field_type = value.get('type', 'string') %}
            {% if field_type == "bool" %}
                <select name={{ key }} class='form-control'>
                    <option value="true" {% if value.get("default") %} selected {% endif %}>True</option>
                    <option value="false" {% if not value.get("default") %} selected {% endif %}>False</option>
                </select>
            {% elif field_type.startswith("map") or "object" in field_type %}
                <textarea name={{ key }} class='form-control' rows="6">
{{ value.get("default") | tojson | replace(",", ",\n") | replace("{", "{\n") | replace("}", "\n}") | trim | indent(4) }}
                </textarea>
            {% elif "passw" in key or "token" in key or "key" in key or "secret" in key %}
                <input type="password" name={{ key }} class='form-control'>
            {% else %}
                <input type="text" value="{{ value.get('default') }}" name={{ key }} class='form-control'>
            {% endif %}
        </div>
    {% endfor %}
</div>
</div>
                                    {% endif %}
                                    <!-- END SLD_SORT False -->
                                 <div class="border-top my-4"></div>
                                    <button type="submit" class="btn w-100 btn-success" name="button" value=plan;"
                                        action="{{url_for('.list_deploys')}}">
                                        Plan
                                    </button>
                    </form>
                    </div>
                            <!-- End Form -->
                    </div>

                            <div class="input-group">
                            </div>
                        </div>
                    </div>
                </div>

                {% include 'includes/footer.html' %}

</main>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}
<script>
document.addEventListener("DOMContentLoaded", function() {
    document.querySelector('.toggle-advanced').addEventListener('click', function() {
        var content = document.getElementById('advanced-variables-content');
        if (content.style.display === 'none') {
            content.style.display = 'block';
        } else {
            content.style.display = 'none';
        }
    });
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    var form = document.getElementById('vars_form');
    form.addEventListener('submit', function() {
        document.querySelectorAll('textarea').forEach(function(textarea) {
            textarea.value = textarea.value.replace(/\s+/g, ' ').trim();
        });
    });
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    var variablesFormButton = document.querySelector("[data-target='#variables']");
    var tfvarsFormButton = document.querySelector("[data-target='#tfvars']");
    var variablesFormContent = document.getElementById('variables');
    var tfvarsFormContent = document.getElementById('tfvars');

    variablesFormButton.addEventListener('click', function() {
        // Toggle current content
        variablesFormContent.classList.toggle('show');

        // Close the other content if it's open
        if (tfvarsFormContent.classList.contains('show')) {
            tfvarsFormContent.classList.remove('show');
        }
    });

    tfvarsFormButton.addEventListener('click', function() {
        // Toggle current content
        tfvarsFormContent.classList.toggle('show');

        // Close the other content if it's open
        if (variablesFormContent.classList.contains('show')) {
            variablesFormContent.classList.remove('show');
        }
    });
});
</script>

{% endblock javascripts %}