{% extends "base.html.twig" %}
{% block title %}Add job{% endblock %}
{% block content %}
    <h2>Add a cronjob</h2>
<form method="post" class="form-horizontal" enctype="multipart/form-data" action="{{ path('job_edit', { id : id }) }}">

    <h3>General info</h3>
    <div class="mb-3">
        <label for="name">Name</label>
        <input type="text" name="name" class="form-control" id="name" placeholder="System update" value="{{ name }}">
    </div>
    <div class="mb-3">
        <label for="name">Interval (in seconds)</label>
        <div class="input-group">
            <div class="dropdown input-group-prepend">
                <button class="btn btn-outline-primary dropdown-toggle" type="button" id="intervalButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Patterns
                </button>
                <div class="dropdown-menu" aria-labelledby="intervalButton">
                    <a class="dropdown-item intervalpattern-item" href="#" data-time="60">Every minute</a>
                    <a class="dropdown-item intervalpattern-item" href="#" data-time="3600">Every hour</a>
                    <a class="dropdown-item intervalpattern-item" href="#" data-time="86400">Every day</a>
                    <a class="dropdown-item intervalpattern-item" href="#" data-time="604800">Every week</a>
                    <a class="dropdown-item intervalpattern-item" href="#" data-time="2419200">Every 4 weeks</a>
                </div>
            </div>
            <input type="number" class="form-control" id="interval" name="interval" value="{{ interval }}">
        </div>
    </div>
    <div class="mb-3">
        <label for="nextrun">Next run</label>
        <input type="text" autocomplete="off" id="nextrunselector" class="form-control datetimepicker-input" data-target="#nextrunselector" data-toggle="datetimepicker" name="nextrun" value="{{ nextrun |  date("d/m/Y H:i:s")}}">
    </div>
    <div class="mb-3">
        <label for="lastrun">Last run</label>
        <input type="text" autocomplete="off" id="lastrunselector" class="form-control datetimepicker-input" data-target="#lastrunselector" data-toggle="datetimepicker" name="lastrun" value="{{ lastrun |  date("d/m/Y H:i:s")}}">
    </div>

    <h3>Job details</h3>
    <div class="mb-3 btn-group">
        <div class="dropdown croncategory-group crontype-group{% if data.crontype != 'http' %} btn-group{% endif %}">
            <button class="btn btn-outline-primary dropdown-toggle" type="button" id="crontypeButton" data-default-text="Job type" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                {% if data.crontype == 'command' %}
                    Command
                {% elseif data.crontype == 'reboot' %}
                    Reboot
                {% elseif data.crontype == 'http' %}
                    Http request
                {% endif %}
            </button>
            <div class="dropdown-menu" aria-labelledby="crontypeButton">
                <a class="dropdown-item crontype-item" href="#" data-type="command">Command</a>
                <a class="dropdown-item crontype-item" href="#" data-type="reboot">Reboot</a>
                <a class="dropdown-item crontype-item" href="#" data-type="http">Http request</a>
            </div>
        </div>

        <div class="dropdown croncategory-group hosttype-group{% if data.crontype != 'http' %} btn-group{% else %} d-none{% endif %}">
            <button class="btn btn-outline-primary dropdown-toggle" type="button" id="hosttypeButton" data-default-text="Host type" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                {% if data.hosttype == 'local' %}
                    Local
                {% elseif data.hosttype == 'ssh' %}
                    SSH
                {% endif %}
            </button>
            <div class="dropdown-menu" aria-labelledby="hosttypeButton">
                <a class="dropdown-item hosttype-item" href="#" data-type="local">Local</a>
                <a class="dropdown-item hosttype-item" href="#" data-type="ssh">SSH</a>
            </div>
        </div>

        <div class="dropdown croncategory-group containertype-group{% if data.crontype != 'http' %} btn-group{% else %} d-none{% endif %}">
            <button class="btn btn-outline-primary dropdown-toggle" type="button" id="containertypeButton" data-default-text="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                {% if data.containertype == 'none' %}
                    None
                {% elseif data.containertype == 'docker' %}
                    Docker
                {% endif %}
            </button>
            <div class="dropdown-menu" aria-labelledby="containertypeButton">
                <a class="dropdown-item containertype-item" href="#" data-type="none">None</a>
                <a class="dropdown-item containertype-item" href="#" data-type="docker">Docker</a>
            </div>
        </div>
    </div>

    <div class="crontype-command crontype-inputs croncategory-inputs{% if data.crontype != 'command' %} d-none{% endif %}">
        <h4>Command details</h4>
        <div class="mb-3">
            <label for="command">Command</label>
            <input type="text" name="command" class="form-control" id="command" placeholder="sudo apt update" value="{% if data.command is not empty %}{{ data.command }}{% endif %}">
        </div>

        <div class="mb-3">
            <label for="response">Expected exit code</label>
            <input type="text" name="response" class="form-control" id="response" placeholder="0" value="{% if data.response is not empty %}{{ data.response }}{% endif %}">
        </div>
    </div>

    <div class="crontype-reboot crontype-inputs croncategory-inputs{% if data.crontype != 'reboot' %} d-none{% endif %}">
        <h4>Reboot job details</h4>
        <div class="mb-3">
            <label for="reboot-command">Reboot command</label>
            <input type="text" name="reboot-command" class="form-control" id="command" placeholder="systemctl reboot" value="{% if attribute(data, 'reboot-command') is not empty %}{{ attribute(data, 'reboot-command') }}{% endif %}">
            <small id="reboot-command-help" class="form-text text-muted">Use {reboot-delay} or {reboot-delay-secs} to add the delay in your command</small>
        </div>

        <div class="mb-3">
            <label for="getservices-command">Get services command</label>
            <input type="text" name="getservices-command" class="form-control" id="command" placeholder="systemctl list-units" value="{% if attribute(data, 'getservices-command') is not empty %}{{ attribute(data, 'getservices-command') }}{% endif %}">
        </div>

        <div class="mb-3">
            <label for="reboot-delay">Reboot delay (in minutes)</label>
            <input type="number" name="reboot-delay" class="form-control" placeholder="5" value="{% if attribute(data, 'reboot-delay') is not empty %}{{ attribute(data, 'reboot-delay') }}{% endif %}">
            <small id="reboot-delay-help" class="form-text text-muted">Delay between triggering reboot and actual reboot</small>
        </div>

        <div class="mb-3">
            <label for="reboot-duration">Reboot duration (in minutes)</label>
            <input type="number" name="reboot-duration" class="form-control" placeholder="10" value="{% if attribute(data, 'reboot-duration') is not empty %}{{ attribute(data, 'reboot-duration') }}{% endif %}">
            <small id="reboot-duration-help" class="form-text text-muted">The amount of time the system takes to actually reboot</small>
        </div>
    </div>

    <div class="crontype-http crontype-inputs croncategory-inputs{% if data.crontype != 'http' %} d-none{% endif %}">
        <h4>HTTP request details</h4>
        <div class="mb-3">
            <label for="url">Url</label>
            <input type="text" name="url" class="form-control" id="url" placeholder="https://scripts.example.com/" value="{% if data.url is not empty %}{{ data.url }}{% endif %}">
        </div>
        <div class="mb-3">
            <label for="basicauth-username">Username for Basic-Auth</label>
            <input type="text" name="basicauth-username" class="form-control" id="basicauth-username" placeholder="www-data" value="{% if attribute(data, 'basicauth-username') is not empty %}{{ attribute(data, 'basicauth-username') }}{% endif %}">
        </div>
        <div class="mb-3">
            <label for="basicauth-password">Password for Basic-Auth</label>
            <input type="password" name="basicauth-password" class="form-control" placeholder="correct horse battery staple" value="{% if attribute(data, 'basicauth-password') is not empty %}{{ attribute(data, 'basicauth-password') }}{% endif %}">
            <small id="basicauth-password-help" class="form-text text-muted">This field is being saved as a secret</small>
        </div>

        <div class="mb-3">
            <label for="response">Expected response status code</label>
            <input type="text" name="response" class="form-control" id="response" placeholder="200" value="{% if attribute(data, 'response') is not empty %}{{ attribute(data, 'response') }}{% endif %}">
        </div>
    </div>

    <div class="hosttype-local hosttype-inputs croncategory-inputs{% if data.hosttype != 'local' %} d-none{% endif %}">
        <h4>Localhost details</h4>
        <h5>No options</h5>
    </div>

    <div class="hosttype-ssh hosttype-inputs croncategory-inputs{% if data.hosttype != 'ssh' %} d-none{% endif %}">
        <h4>SSH host details</h4>
        <div class="mb-3">
            <label for="host">Hostname</label>
            <input type="text" name="host" class="form-control" id="host" placeholder="ssh.abc.xyz" value="{% if data.host is not empty %}{{ data.host }}{% endif %}">
        </div>

        <div class="mb-3">
            <label for="user">Username</label>
            <input type="text" name="user" class="form-control" id="user" placeholder="larry" value="{% if data.user is not empty %}{{ data.user }}{% endif %}">
        </div>

        <div class="mb-3">
            <label for="privkey">Private key</label>
            <div class="input-group">
                <div class="input-group-prepend">
                    <div class="input-group-text border-right-0">
                        <input type="checkbox" name="privkey-keep" class="privkey-keep" value="true" data-privkey="{% if attribute(data, 'ssh-privkey') is not empty %}{{ attribute(data, 'ssh-privkey') }}{% endif %}" checked>
                        <input type="hidden" name="privkey-orig" class="privkey-orig" value="{% if attribute(data, 'ssh-privkey') is not empty %}{{ attribute(data, 'ssh-privkey') }}{% endif %}">
                    </div>
                    <span class="input-group-text border-left-0">Keep</span>
                </div>
                <div class="custom-file input-group">
                    <input type="file" class="custom-file-input" id="privkey" name="privkey" disabled>
                    <label class="custom-file-label" for="privkey">Choose file</label>
                </div>
            </div>
            <small id="custom-file-help" class="form-text text-muted">This file is being saved as a secret</small>
        </div>

        <div class="mb-3">
            <label for="privkey-password">Password for private key</label>
            <input type="password" name="privkey-password" class="form-control" placeholder="correct horse battery staple" value="{% if attribute(data, 'privkey-password') is not empty %}{{ attribute(data, 'privkey-password') }}{% endif %}">
            <small id="privkey-password-help" class="form-text text-muted">If private key is empty this field is being used as ssh-password</small>
            <small id="privkey-password-help-2" class="form-text text-muted">This field is being saved as a secret</small>
        </div>
    </div>

    <div class="containertype-none containertype-inputs croncategory-inputs{% if data.containertype != 'none' %} d-none{% endif %}">
    </div>

    <div class="containertype-docker containertype-inputs croncategory-inputs{% if data.containertype != 'docker' %} d-none{% endif %}">
        <h4>Docker container details</h4>
        <div class="mb-3">
            <label for="service">Service</label>
            <input type="text" name="service" class="form-control" id="service" placeholder="mysql" value="{% if attribute(data, 'service') is not empty %}{{ attribute(data, 'service') }}{% endif %}">
        </div>

        <div class="mb-3">
            <label for="container-user">Username</label>
            <input type="text" name="container-user" class="form-control" id="container-user" placeholder="larry" value="{% if attribute(data, 'container-user') is not empty %}{{ attribute(data, 'container-user') }}{% endif %}">
        </div>
    </div>

    <h3>Variables</h3>

    <div class="vars mb-3">
        <div class="input-group var-group d-none">
            <div class="input-group-prepend">
                <div class="input-group-text border-right-0">
                    <input type="checkbox" name="var-issecret[0]" class="var-issecret" placeholder="value" value="true">
                </div>
                <span class="input-group-text border-left-0">Secret</span>
            </div>
            <input type="text" name="var-id[0]" class="form-control var-id" placeholder="name">
            <input type="text" name="var-value[0]" class="form-control var-value" placeholder="value">
        </div>
        {% set key = 1 %}
        {% for id,var in data.vars %}
            <div class="input-group var-group">
                <div class="input-group-prepend">
                    <div class="input-group-text border-right-0">
                        <input type="checkbox" name="var-issecret[{{ key }}]" class="var-issecret" placeholder="value" value="true"{%  if var.issecret %} checked{% endif %}>
                    </div>
                    <span class="input-group-text border-left-0">Secret</span>
                </div>
                <input type="text" name="var-id[{{ key }}]" class="form-control var-id" placeholder="name" value="{{ id }}">
                <input type="{% if var.issecret %}password{% else %}text{% endif %}" name="var-value[{{ key }}]" class="form-control var-value" placeholder="value" value="{{ var.value }}">
            </div>
        {% endfor %}
    </div>

    <div class="vars-description mb-3 d-none">
        <p>
            You can add variables by using {variable-name} in job details
        </p>
    </div>
    <div class="mb-3">
        <a href="#" class="btn btn-outline-primary addvar-btn">Add variable</a>
    </div>

    <input type="hidden" name="crontype" class="crontype" value="{{ data.crontype }}">
    <input type="hidden" name="hosttype" class="hosttype" value="{{ data.hosttype }}">
    <input type="hidden" name="containertype" class="containertype" value="{{ data.containertype }}">
    <button type="submit" class="btn btn-outline-primary">Submit</button>
</form>

{% endblock %}

{% block styles %}
    {{ encore_entry_link_tags('job.add') }}
{% endblock %}

{% block scripts %}
    {{ encore_entry_script_tags('job.add') }}
{% endblock %}