{% extends 'admin/master.html' %}

{% block body %}
<div class="container mt-4">
    <h3>Import Rules from Checkmk Folder</h3>
    <p>
        Import every Checkmk Setup Rule of the given folder into project
        <strong>{{ project.name }}</strong>. Imported rules are added as
        <em>static</em> rules; re-running the import updates them in place
        instead of creating duplicates.
    </p>
    {% if not accounts %}
    <div class="alert alert-warning">
        No enabled Checkmk (cmkv2) account found. Create one first.
    </div>
    {% endif %}
    <form method="POST" action="{{ url_for('.import_from_cmk_view') }}"
          id="cmk_import_form">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
        <input type="hidden" name="id" value="{{ project_id }}"/>
        <div class="form-group">
            <label for="account">Checkmk account</label>
            <select class="form-control" id="account" name="account" required>
                {% for account in accounts %}
                <option value="{{ account }}"
                        {% if account == project.test_account %}selected{% endif %}>
                    {{ account }}
                </option>
                {% endfor %}
            </select>
        </div>
        <div class="form-group">
            <label for="folder">Folder</label>
            <input type="text" class="form-control" id="folder" name="folder"
                   value="/" placeholder="/server/windows"/>
            <small class="form-text text-muted">
                Use / for the main folder. Slash or tilde notation both work.
            </small>
        </div>
        <div class="form-check mb-3">
            <input type="checkbox" class="form-check-input" id="recursive" name="recursive"/>
            <label class="form-check-label" for="recursive">
                Include subfolders
            </label>
        </div>
        <button type="submit" id="cmk_import_submit" class="btn btn-primary"
                {% if not accounts %}disabled{% endif %}>
            <i class="fa fa-download"></i> Import
        </button>
        <a href="{{ return_url }}" class="btn btn-secondary">Cancel</a>

        <div id="cmk_import_progress" class="mt-3" style="display: none;">
            <div class="progress mb-2">
                <div class="progress-bar progress-bar-striped progress-bar-animated"
                     role="progressbar" style="width: 100%;"
                     aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <small id="cmk_import_status" class="text-muted">
                <i class="fa fa-spinner fa-spin"></i> Working…
            </small>
        </div>
    </form>
</div>

<script>
    (function () {
        var form = document.getElementById('cmk_import_form');
        if (!form) { return; }
        form.addEventListener('submit', function () {
            var button = document.getElementById('cmk_import_submit');
            var progress = document.getElementById('cmk_import_progress');
            var status = document.getElementById('cmk_import_status');
            var account = document.getElementById('account').value || 'Checkmk';
            var folder = document.getElementById('folder').value || '/';
            var recursive = document.getElementById('recursive').checked;
            button.disabled = true;
            button.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Importing…';
            status.innerHTML =
                '<i class="fa fa-spinner fa-spin"></i> Contacting ' + account +
                ', importing Setup Rules from folder ' + folder +
                (recursive ? ' (including subfolders)' : '') +
                '. This can take a moment for large folders…';
            progress.style.display = '';
        });
    })();
</script>
{% endblock %}