{{define "title"}}Invite Users{{end}}
{{define "content"}}

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/users">Users</a></li>
            <li class="breadcrumb-item active" aria-current="page">Invite</li>
        </ol>
    </nav>

    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Invite Users</h1>
    </div>

    <form method="POST">

        <div class="row">
            <div class="col">

                <div class="card mb-4">
                    <div class="card-body">

                        <div id="email-form-groups">
                            <div class="form-group">
                                <label for="inputEmail">Email for Invite 1</label>
                                <input type="text" class="form-control invite-user-email" placeholder="enter email" name="Emails" value="">
                            </div>
                        </div>

                        <p class="mt-2 mb-0">
                            <a href="javascript:void(0)" class="btn btn-outline-primary btn-sm" id="inviteUser1">
                                <i class="fas fa-user-plus mr-1"></i>Add another invitation</a></p>
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">

                        <div class="form-group">
                            <label for="selectRoles">Roles <small>- Select at least one role for invited user(s).</small></label>

                            {{ range $t := .roles.Options }}
                                <div class="form-check">
                                    <input class="form-check-input {{ ValidationFieldClass $.validationErrors "Roles" }}"
                                           type="checkbox" name="Roles"
                                           value="{{ $t.Value }}" id="inputRole{{ $t.Value }}"
                                           {{ if $t.Selected  }}checked="checked"{{ end }}>
                                    <label class="form-check-label" for="inputRole{{ $t.Value }}">
                                        {{ $t.Title }}
                                    </label>

                                </div>
                            {{ end }}
                            {{template "invalid-feedback" dict "fieldName" "Roles" "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors }}
                        </div>
                    </div>
                </div>

            </div>

        </div>

        <div class="row mt-4">
            <div class="col">
                <input id="btnSubmit" type="submit" value="Invite Users" class="btn btn-primary"/>
            </div>
        </div>

    </form>
{{end}}
{{ define "js" }}
    <script>
        function addAnotherEmail(el) {
            if ($(el).val() == '') {
                //return;
            }

            cnt = 0;
            $( "input.invite-user-email" ).each(function( index ) {
                cnt = cnt + 1;
            });
            cnt = cnt + 1;

            newId = 'inviteUser'+cnt;
            newHtml = '';
            newHtml = newHtml + '<div class="form-group">';
            newHtml = newHtml + '<label for="inputEmail">Email for Invite '+cnt+'</label>';
            newHtml = newHtml + '<input type="text" class="form-control invite-user-email" placeholder="enter email" name="Emails" value="">';
            newHtml = newHtml + '</div>';
            $('#email-form-groups').append(newHtml);
        }

        $(document).ready(function(){
            $("#inviteUser1").click( function() {
                addAnotherEmail($(this));
            });

            $("#inputRole").on("change", function() {
                if ($(this).val() == 'admin') {
                    //$('#userProjects').hide();
                } else {
                    //$('#userProjects').show();
                }
            }).change();
        });
    </script>
{{ end }}