{% component_block "modal" id="modal_send_bulk_email" start_open="true" title="Send Bulk Email" %}
{% fill "content" %}
<form class="py-4"
      id="modal_send_bulk_email-form"
      hx-post="{% url 'core:api:emails:send bulk' %}"
      hx-swap="none">
    {% csrf_token %}
    <div class="form-control w-full">
        <label class="label justify-start">
            Client Email
            <span class="required_star">*</span>
        </label>
        <select id="modal_input-email"
                name="emails"
                type="email"
                class="peer select select-block select-bordered invalid:[&:not(:placeholder-shown):not(:focus)]:select-error"
                required
                multiple>
            {% if email_list %}<option value="" disabled selected>Select a client email below</option>{% endif %}
            {% for email in email_list %}
                <option value="{{ email }}"
                        {% if email in selected_clients %}selected{% endif %}>{{ email }}</option>
            {% empty %}
                <option value="" disabled selected>There are currently no client emails stored.</option>
            {% endfor %}
        </select>
        <label class="label peer-[&amp;:not(:placeholder-shown):not(:focus):invalid]:block hidden">
            <span class="label-text-alt text-error">Please enter a valid email.</span>
        </label>
    </div>
    <div class="form-control">
        <label class="label justify-start">
            Subject
            <span class="required_star">*</span>
        </label>
        <input class="peer input input-bordered"
               name="subject"
               minlength="8"
               maxlength="64"
               required>
        <label class="label peer-[&amp;:not(:placeholder-shown):not(:focus):invalid]:block hidden">
            <span class="label-text-alt text-error">Please enter a valid subject between 8 and 64 characters.</span>
        </label>
    </div>
    <div class="flex flex-row justify-start gap-8">
        <div class="flex flex-col">
            <label class="label">CC Yourself</label>
            <input class="peer checkbox checkbox-bordered"
                   type="checkbox"
                   name="cc_yourself">
        </div>
        <div class="flex flex-col">
            <label class="label">BCC Yourself</label>
            <input class="peer checkbox checkbox-bordered"
                   type="checkbox"
                   name="bcc_yourself">
        </div>
    </div>
    <div class="form-control">
        <label class="label justify-start">
            Content
            <span class="required_star">*</span>
        </label>
        <textarea class="peer textarea textarea-bordered invalid:[&:not(:placeholder-shown):not(:focus)]:textarea-error"
                  minlength="{{ content_min_length }}"
                  maxlength="{{ content_max_length }}"
                  name="content"
                  required></textarea>
        <label class="label peer-[&amp;:not(:placeholder-shown):not(:focus):invalid]:block hidden">
            <span class="label-text-alt text-error">Please enter a message between {{ content_min_length }} and {{ content_max_length }} characters.</span>
        </label>
        <label class="label">
            <span class="label-text-alt select-text">
                Note: You can use placeholders to individually fill in details PER user. For example you can use
                <strong>$first_name</strong> to fill in the users name.
                <br>
                <a href="https://docs.myfinances.cloud/user-guide/emails/templates/"
                   class="link link-primary link-hover"
                   target="_blank">View available placeholders</a>
            </span>
        </label>
    </div>
    <div class="modal-action">
        <button type="submit"
                id="modal_send_bulk_email-submit"
                class="btn btn-primary"
                _="on click if #modal_send_bulk_email-form.checkValidity() call #modal_send_bulk_email.close() end">
            Send Email
        </button>
        <button type="button"
                _="on click call #modal_send_bulk_email.close()"
                class="btn">Cancel</button>
    </div>
</form>
{% endfill %}
{% endcomponent_block %}
