{% extends "template.twig" %}

{% block title %}Импорт пользователей{% endblock %}
{% block head %}
    {{ parent() }}
    <style>
    
    </style>
{% endblock %}

{% block content %}
{% if message %}
<div id="message" style="padding: 1rem; border: 2px solid black; background-color: green; color: white">{{message}}</div>
{% endif %}
{% if error %}
<div id="error" style="padding: 1rem; border: 2px solid black; background-color: red; color: white">{{error}}</div>
{% endif %}
<h4>Импорт</h4>
<p>Перенесите XML файл дампа на форму или вставьте содерживое в поле</p>
<form action="/import" method="post">
    <textarea name="xml" cols="30" rows="10"></textarea>
    <br>
    <input type="submit" name="submit" value="submit">
</form>
<script>
document.addEventListener("DOMContentLoaded", function() {
    let dropZone = document.body;
    dropZone.addEventListener("dragover", function(e) {
        e.stopPropagation();
        e.preventDefault();
        e.dataTransfer.dropEffect = "copy";
    }, false);
    dropZone.addEventListener("dragleave", function(e) {
        e.stopPropagation();
        e.preventDefault();
        e.dataTransfer.dropEffect = "copy";
    }, false);
    dropZone.addEventListener("drop", async function(e) {
        e.stopPropagation();
        e.preventDefault();
        e.dataTransfer.dropEffect = "copy";
        // get the file
        let file = e.dataTransfer.files[0];
        let fr=new FileReader();
        fr.onload=function(){
            document.querySelector('[name=xml]').textContent = fr.result;
        }
        fr.readAsText(file);
    }, false);
});
</script>
{% endblock %}