<!-- Add Email -->
<div class="modal fade" id="addEmailModal" tabindex="-1" aria-labelledby="addEmailModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="addEmailModalLabel">{{ lang.add }} {{ lang.cp_email_name }}</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" action="{{ route('email.store') }}">
                <div class="modal-body row g-3 p-3">
                    {{ csrf.field | raw }}
                    <div class="col-md-12">
                        <label for="username" class="form-label">{{ lang.user_email }}</label>
                        <div class="input-group">
                            <input type="text" placeholder="{{ lang.user_username }}" class="form-control {{ errors.username ? ' is-invalid' : '' }}" id="username" name="username">
                            <span class="input-group-text">@{{ domain }}</span>
                            {% if errors.username %}
                                <div class="invalid-feedback">{{ errors.username | first }}</div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-12">
                        <label for="email_forward" class="form-label">{{ lang.cp_email_forward }}</label>
                        <input type="email" placeholder="{{ lang.cp_email_forward_add }}" class="form-control {{ errors.email_forward ? ' is-invalid' : '' }}" id="email_forward" name="email_forward">
                        {% if errors.email_forward %}
                            <div class="invalid-feedback">{{ errors.email_forward | first }}</div>
                        {% endif %}
                    </div>
                    <div class="col-md-12">
                        <label for="email_quota" class="form-label">{{ lang.cp_email_quota }} (MB)</label>
                        <input type="number" min="0" value="{{ quotasize }}" class="form-control {{ errors.email_quota ? ' is-invalid' : '' }}" id="email_quota" name="email_quota">
                        {% if errors.email_quota %}
                            <div class="invalid-feedback">{{ errors.email_quota | first }}</div>
                        {% endif %}
                    </div>
                    <div class="col-md-12 mb-2">
                        <label for="password" class="form-label">{{ lang.user_password }}</label>
                        <div class="input-group">
                            <input type="password" name="password" placeholder="{{ lang.user_password }}" id="password" class="form-control {{ errors.password ? ' is-invalid' : '' }}" />
                            <span class="input-group-text"><a href="javascript:;" class="text-dark" onclick="showPassword()">Show</a></span>
                            {% if errors.password %}
                                <div class="invalid-feedback">{{ errors.password | first }}</div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-default" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary px-5">{{ lang.create }}</button>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- Change Password -->
<div class="modal fade" id="changePasswordModal" tabindex="-1" aria-labelledby="changePasswordModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="changePasswordModalLabel">{{ lang.change_password }}</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" action="{{ route('email.update.password') }}">
                <div class="modal-body row g-3 p-3">
                    {{ csrf.field | raw }}

                    <div class="col-md-12">
                        <label for="email" class="form-label">{{ lang.email }}</label>
                        <input type="email" placeholder="{{ lang.email }}" class="form-control {{ errors.email ? ' is-invalid' : '' }}" id="email" name="email" readonly>
                        {% if errors.email %}
                            <div class="invalid-feedback">{{ errors.email | first }}</div>
                        {% endif %}
                    </div>

                    <div class="col-md-12 mb-2">
                        <label for="cpassword" class="form-label">{{ lang.password }}</label>
                        <div class="input-group">
                            <input type="password" name="password" placeholder="{{ lang.new_password }}" id="cpassword" class="form-control {{ errors.password ? ' is-invalid' : '' }}" />
                            <span class="input-group-text"><a href="javascript:;" class="text-dark" onclick="showCPassword()">Show</a></span>
                            {% if errors.password %}
                                <div class="invalid-feedback">{{ errors.password | first }}</div>
                            {% endif %}
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-default" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary px-5">{{ lang.update_password }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Change Quota -->
<div class="modal fade" id="updateQuotadModal" tabindex="-1" aria-labelledby="updateQuotadModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="updateQuotadModalLabel">{{ lang.update }} {{ lang.cp_email_quota }}</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" action="{{ route('email.update.quota') }}">
                <div class="modal-body row g-3 p-3">
                    {{ csrf.field | raw }}

                    <div class="col-md-12">
                        <label for="email" class="form-label visually-hidden">{{ lang.email }}</label>
                        <input type="email" placeholder="{{ lang.email }}" class="form-control {{ errors.email ? ' is-invalid' : '' }}" id="useremail" name="email" readonly>
                    </div>

                    <div class="col-md-12 mb-2">
                        <label for="quota" class="form-label">{{ lang.cp_email_quota }}</label>
                        <div class="input-group">
                            <input type="number" name="quota" placeholder="{{ lang.cp_email_quota }}" id="quota" class="form-control" required />
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-default" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary px-5">{{ lang.update }}</button>
                </div>
            </form>
        </div>
    </div>
</div>


{% block innerjs %}
    <script>
        function showPassword() {
            var x = document.getElementById("password");
            if (x.type === "password") {
                x.type = "text";
            } else {
                x.type = "password";
            }
        }
        function showCPassword() {
            var x = document.getElementById("cpassword");
            if (x.type === "password") {
                x.type = "text";
            } else {
                x.type = "password";
            }
        }
    </script>
{% endblock %}