{% extends 'base.html' %}
{% block header %}
    {% include 'header.html' %}
{% endblock %}
{% block content %}
{% set post = request.post() %}
<div id='content' class='container mb-3'>
    <div class='mt-3 mb-3'>
        <a href='{{ url('/groups') }}' 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'>
        <div class='mb-3'>
            <label class='form-label'>アイコン</label>
            <div id='image-form'>
                <img class="group-icon icon" src="{{ dataurl(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>
            <select class='form-select' name='parent'>
                <option></option>
                {% for group in groups %}
                    <option value='{{group.id}}'>{{ group.name }}</option>
                {% endfor %}
            </select>
        </div>
        <button type='submit' class='btn btn-primary'>チームを作成</button>
        <p class='error'>{{ error }}</p>
        {{ forms.csrf(request) }}
    </form>
</div>
{% endblock %}
