<div class="row">
    <div class="col-md-4 offset-md-4">

        <form action="index.php?module=user&class=avatar" method="post" name="hm" id="hm" enctype="multipart/form-data" class="form-horizontal form-label-left">
            <input type="hidden" name="SaveAvatar" id="SaveAvatar" value="0" />
            <input type="hidden" name="CropAvatar" id="CropAvatar" value="0" />
            <input type="hidden" name="RemoveAvatar" id="RemoveAvatar" value="0" />
            <input type="hidden" name="UploadAvatar" id="UploadAvatar" value="0" />
            <input type="hidden" name="AvatarPath" id="AvatarPath" value="[% if $AvatarPath %][% $AvatarPath %][% else %]0[% /if %]" />

            <div class="card panel-info shadow-sm rounded" style="margin-top: 30%;">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-6">
                            <span class="fcs-card-title h4">[% $user->gettext('Avatar hochladen') %]</span>
                        </div>
                        <div class="col-md-6 text-end">
                            <div class="btn-group">
                                <input type="button" onclick="uploadImage();" value="[% $user->gettext('Speichern') %]" class="btn btn-outline-primary" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">                  
                    [% if $AvatarPath %]
                        <div class="form-group row mb-3">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12"></label>
                            <div class="col-md-9 col-sm-9 col-xs-12">
                                [% if !$AvatarFromURL %]
                                [% if !$userdata.croppedavatar %]
                                    <a href="index.php?module=user&event=cropImage&userid=[% $userdata.user_id %]&image=[% $AvatarPath%]" class="openInBigIFrameModal"><div class="img-circular">
                                        </div></a>
                                    [% else %]
                                    <a href="index.php?module=user&event=cropImage&userid=[% $userdata.user_id %]&image=[% $AvatarPath%]" class="openInBigIFrameModal"><img src="index.php?module=upload&class=download&event=ShowImage&name=[%  $userdata.croppedavatar %]" class="hm-avatar-big" /></a>
                                    [% /if %]
                                [% else %]
                                <div class="img-circular"></div>
                                [% /if %]
                            </div>
                        </div>
                        <style>
                            .img-circular{
                                width: 200px;
                                height: 200px;
                                background-image: url('index.php?module=upload&class=download&event=ShowImage&name=[%  $AvatarPath %]');
                                background-size: cover !important;
                                background-position: center;
                                background-repeat: no-repeat;
                                display: block;
                                border-radius: 100px;
                                -webkit-border-radius: 100px;
                                -moz-border-radius: 100px;
                            }
                        </style>
                    [% /if %]

                 
                    <div class="form-group row mb-3" id="AvatarForm" [% if $AvatarFromURL %]style='display:none;'[% /if %]>
                        <label class="control-label col-md-3 col-sm-3 col-xs-12">[% $user->gettext('Avatar') %]</label>
                        <div class="col-md-9 col-sm-9 col-xs-12">
                            <div class="input-group">
                                <input type="file" name="Avatar" class="form-control" [% if $AvatarFromURL %]disabled[% /if %]>
                                <span class="input-group-text btn btn-outline-primary" onclick="deleteImage();">[% $user->gettext('Löschen')%]</span>
                            </div>
                            <p><a href="javascript: $('#AvatarForm').hide(); $('#AvatarForm :input').prop('disabled', true); $('#AvatarURLForm :input').prop('disabled', false); $('#AvatarURLForm').show();" id="showAvatarForm">[% $user->gettext('...oder Avatar per URL anlegen')%]</a></p> 
                        </div>
                    </div>

                    <div class="form-group row mb-3" id="AvatarURLForm" [% if !$AvatarFromURL %]style='display:none;'[% /if %]>
                        <label class="control-label col-md-3 col-sm-3 col-xs-12">[% $user->gettext('Avatar-URL') %]</label>
                        <div class="col-md-9 col-sm-9 col-xs-12">
                            <input type="text" class="form-control" name="AvatarURL" [% if $AvatarFromURL %]value="[% $AvatarPath %]"[% /if %][% if !$AvatarFromURL %]disabled[% /if %]>
                            <p><a href="javascript: $('#AvatarURLForm').hide(); $('#AvatarURLForm :input').prop('disabled', true); $('#AvatarForm :input').prop('disabled', false); $('#AvatarForm').show();" id="showAvatarForm">[% $user->gettext('...oder Avatar hochladen')%]</a></p> 
                        </div>
                    </div>

                </div>
            </div> 
        </form>
    </div>
</div>

<script>
    function uploadImage() {
        $('#SaveAvatar').val(1);
        $('#UploadAvatar').val(1);
        $('#SaveValue').val(0);
        $('#hm').submit();
    }

    function deleteImage() {
        bootbox.confirm('[% $user->gettext('Möchten Sie das Avatar wirklich löschen?') %]', function (result) {
            if (result) {
                $('#SaveAvatar').val(0);
                $('#UploadAvatar').val(0);
                $('#RemoveAvatar').val(1);
                $('#SaveValue').val(0);
                $('#hm').submit();
            }
        });
    }

    function cropImage() {
        $('#SaveAvatar').val(1);
        $('#CropAvatar').val(1);
        $('#UploadAvatar').val(0);
        $('#SaveValue').val(0);
        $('#hm').submit();
    }

    function closeIFrame() {
        $("#myBigIFrameModal").modal('hide');

        window.location.href = window.location.href;



    }
</script>
