@extends('layouts.default')
@section('content')
<section class="section">
    <form method="POST" action="/user/{{ $user->id }}/password">
        @csrf
        @method('PATCH')
        <input type="hidden" name="uname" value="{{ $user->username }}">
        <input type="hidden" name="id"    value="{{ $user->id }}">

    <div class="container">
        <div class="level">
            <div class="level-left">
                <figure class="image is-64x64 is-pulled-left">
                    <img src="/img/gender-u.png">
                </figure>
                <div class="container is-pulled-left" style="margin-left: 30px;">
                    <h1 class="title">[ {{ $user->username }} ]</h1>
                    <h2 class="subtitle">{{trans('msgs.loginPasswordChange')}}</h2>
                </div>
            </div>
            <div class="level-right">
                <div class="buttons">
                    <a href="{{ URL::previous() }}" class="button is-outlined is-primary">{{trans('labels.cancel')}}</a>
                    <input type="submit" class="button is-primary" value="{{trans('labels.update')}}">
                </div>
            </div>
        </div>
        <div class="container is-pulled-left">
            <div class="field is-horizontal">
                <div class="field-body">
                    <div class="field">
                        <p class="control has-icons-left">
                            <input class="input" type="text" name="username"   value="{{$user->username}}" placeholder="user ID">
                            <span class="icon is-small is-left">
                                <i class="fas fa-user"></i>
                            </span>
                        </p>
                    </div>
                </div>
            </div>

            <div class="field is-horizontal">
                <div class="field-body">
                    <div class="field">
                        <p class="control has-icons-left">
                            <input class="input" type="password" name="password"  placeholder="password">
                            <span class="icon is-small is-left">
                                <i class="fas fa-unlock"></i>
                            </span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="field is-horizontal">
                <div class="field-body">
                    <div class="field">
                        <p class="control has-icons-left">
                            <input class="input" type="password" name="password_new"  placeholder="new password">
                            <span class="icon is-small is-left">
                                <i class="fas fa-key"></i>
                            </span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="field is-horizontal">
                <div class="field-body">
                    <div class="field">
                        <p class="control has-icons-left">
                            <input class="input" type="password" name="password_confirm"  placeholder="retype new password">
                            <span class="icon is-small is-left">
                                <i class="fas fa-key"></i>
                            </span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </form>
</section>
@endsection