{% extends 'base.html' %}
{% block header %}
    {% include 'header.html' %}
{% endblock %}
{% block content %}
{% if error == None %}
{% set post = request.post() %}
{% else %}
{% set post = {} %}
{% endif %}
    <form method='POST' action='' enctype='multipart/form-data' class='container'>
    {% if request.user.id == user.id %}
        <nav class='nav nav-tabs mt-3'>
            <a class='nav-link active' href='{{ url('/users/' + user.screen_name + '/settings/profile') }}'>プロフィール</a>
            <a class='nav-link' href='{{ url('/users/' + user.screen_name + '/settings/password') }}'>パスワード</a>
            <a class='nav-link' href='{{ url('/users/' + user.screen_name + '/settings/notification') }}'>通知</a>
        </nav>
        <h2 class='mt-4 mb-3'>プロフィール変更</h2>
    {% else %}
        <h2 class='mt-4 mb-3'>{{user.name}}のプロフィール変更</h2>
    {% endif %}
        <div class='mb-3'>
            <label class='form-label'>アイコン</label>
            <div id='image-form'>
                <img src="{{ dataurl(icon) }}" class="user-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' for='screen-name-form'>ログイン名</label>
            <input class='form-control' id='screen-name-form' type='text' name='screen_name' placeholder='ログイン名' value='{{ screen_name }}'/>
        </div>
        <div class='mb-3'>
            <label class='form-label' for='name-form'>名前</label>
            <input class='form-control' id='name-form' type='text' name='name' placeholder='名前' value='{{ name }}'/>
        </div>
        {% if permission("admin", request.user) %}
        <div>
            <label class='form-label'>役割</label>
            {% for role in roles %}
            <div class='form-check'>
                <input class='form-check-input' id='{{role.screen_name}}-roles-input' type='checkbox' name='roles' value='{{ role.screen_name }}' {% if role in user.roles %}checked{% endif %}/>
                <label class='form-check-label' for='{{role.screen_name}}-roles-input'>
                    {{ role.name }}
                </label>
            </div>
            {% endfor %}
        </div>
        {% endif %}
        <div class='mt-4 mb-4'>
            <button type='submit' class='btn btn-primary'>設定を変更</button>
        </div>
        <!--
        <a href='{{ url('/users/'+user.id|string+'/delete') }}'>
            <button type='button'>ユーザーを削除</button>
        </a>
        -->
        {% if error %}
            <p class='error'>{{ error }}</p>
        {% endif %}
        {% if message %}
            <p class='message'>{{ message}}</p>
        {% endif %}
        {{ forms.csrf(request) }}
    </form>
{% endblock %}
