{% extends 'login_base.html' %}
{% block content %}
<form method='POST' action='' enctype="multipart/form-data" class='entrance'>
    <div class='main mb-4'>
        <h1 class='mb-4'>Mitamaに参加する</h1>
        <div class='mb-3'>
            <label class='form-label'>アイコン</label>
            <div id='image-form'>
                <img src="{{ dataurl(icon) if icon|length > 0 else url("/static/noimage_user.svg") }}" style='width: 80px; height: 80px; margin-right: 24px' class='user-icon'/>
                <label class='btn btn-primary'>
                    <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='{{ screen_name }}' />
        </div>
        <div class='mb-3'>
            <label class='form-label'>名前</label>
            <input class='form-control' type='text' name='name' placeholder='名前' value='{{ name }}' />
        </div>
        <div class='mb-3'>
            <label class='form-label'>パスワード</label>
            <input class='form-control' type='password' name='password' placeholder='パスワード' value='{{ password }}'/>
        </div>
    </div>
    {{ forms.csrf(request) }}
    <div class='d-grid'>
        <button type="submit" class='btn btn-primary'>Mitamaに参加する</button>
    </div>
    <p class='error'>{{ error }}</p>
</form>
{% endblock %}
