{% extends 'base.html' %}
{% block header %}
    {% include 'header.html' %}
{% endblock %}
{% block content %}
{% if error == None %}
{% set post = request.post() %}
{% else %}
{% set post = {} %}
{% endif %}
<script>
    function copyToClipboard(id) {
        var copyTarget = document.getElementById(id);
        copyTarget.select();
        document.execCommand("Copy");
    }
</script>
<div id='content' class='container mb-3'>
    <div class='mt-3 mb-3'><a href='{{ url('/users') }}' class='btn btn-outline-secondary'><i class='bi-arrow-left'></i>戻る</a></div>
    <h2 class='mt-4 mb-3'>ユーザーを招待</h2>
    <form method='post' action='' enctype='multipart/form-data' class="inner tight">
        <div class='mb-3'>
            <label class='form-label'>メールアドレス</label>
            <input class='form-control' type='email' name='email' placeholder='メールアドレス' value='{{ post.email }}'/>
        </div>
        <div class='mb-3'>
            <label class='form-label'>アイコン</label>
            <div id='image-form'>
                <img src="{{ dataurl(icon) }}" class='user-icon icon' style='width: 80px; height: 80px'/>
                <label class='btn btn-primary' style='margin-left: 24px'>
                    <input type='file' name='icon' accept='image/*' onchange="previewImage(this)" style='display: none' />
                    画像を選択
                </label>
                <script>
                    function previewImage(dom) {
                        document.querySelector("#image-form img").src=URL.createObjectURL(dom.files[0])
                    }
                </script>
            </div>
        </div>
        <div class='mb-3'>
            <label class='form-label'>ログイン名</label>
            <input class='form-control' type='text' name='screen_name' placeholder='ログイン名' value='{{ post.screen_name }}'/>
        </div>
        <div class='mb-3'>
            <label class='form-label'>名前</label>
            <input class='form-control' type='text' name='name' placeholder='名前' value='{{ post.name }}'/>
        </div>
        <div class='mb-3'>
            <label class='form-label'>役割</label>
            {% for role in roles %}
            <div class='form-check'>
                <input class='form-check-input' id='{{role.screen_name}}_role' type='checkbox' name='roles' value='{{ role.screen_name }}'/>
                <label class='form-check-label' for='{{role.screen_name}}_role'>{{ role.name }}</label>
            </div>
            {% endfor %}
        </div>
        <button type='submit' class='btn btn-primary'>ユーザーを招待</button>
        {% if error %}
        <p class='error'>{{ error }}</p>
        {% endif %}
        {{ forms.csrf(request) }}
    </form>
</div>
{% endblock %}
