<h4><a href="#/home"><i class="fas fa-chevron-left"></i></a>&nbsp;<%= _lc( 'CREATE_MESSAGE' ) %></h4>
<div class="row">
    <div class="col-sm-12">
        <div class="card">
            <form data-id="form-message"
                  class="needs-validation"
                  novalidate>
                <div class="card-body">
                    <div class="form-group">
                        <label for="select-recipients">
                            <%= _lc( 'MESSAGE_RECIPIENTS' ) %>
                        </label>
                        <br />
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio"
                                   id="input-select-recipients-toggle-all"
                                   data-id="input-select-recipients-toggle-all"
                                   name="select-recipients-toggle"
                                   value="input-select-recipients-toggle-all"
                                   class="custom-control-input"
                                   checked="checked" />
                            <label class="custom-control-label"
                                   for="input-select-recipients-toggle-all">
                                <%= _lc( 'TO_ALL_RECIPIENTS' ) %>
                            </label>
                        </div>
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio"
                                   id="input-select-recipients-toggle-selected"
                                   data-id="input-select-recipients-toggle-selected"
                                   name="select-recipients-toggle"
                                   value="input-select-recipients-toggle-selected"
                                   class="custom-control-input" />
                            <label class="custom-control-label"
                                   for="input-select-recipients-toggle-selected">
                                <%= _lc( 'TO_SELECTED_RECIPIENTS' ) %>
                            </label>
                        </div>
                    </div>
                    <div class="collapse"
                         data-id="collapse-select-recipients">
                        <div class="form-group">
                            <select class="form-control custom-select"
                                    size="4"
                                    id="select-recipients"
                                    required
                                    data-id="select-recipients"
                                    multiple="multiple">
                                <% for ( var ri = 0; ri < recipients.length; ri++ ) {   %>
                                    <option value="<%= recipients[ ri ].getId() %>"
                                            data-profile-id="<%= recipients[ ri ].getId() %>"
                                            selected="selected"><%= recipients[ ri ].getName() %></option>
                                <% }    %>
                            </select>
                            <div class="invalid-feedback">
                                <%= _lc( 'VALIDATION_INPUT_REQUIRED' ) %>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="input-subject">
                            <%= _lc( 'MESSAGE_SUBJECT' ) %>
                        </label>
                        <input type="text"
                               minlength="2"
                               maxlength="32"
                               name="subject"
                               data-id="input-subject"
                               id="input-subject"
                               class="form-control"
                               required />
                        <div class="invalid-feedback">
                            <%= _lc( 'VALIDATION_INPUT_REQUIRED' ) %>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="textarea-message">
                            <%= _lc( 'MESSAGE_BODY' ) %>
                        </label>
                        <textarea class="form-control"
                                  id="textarea-message"
                                  data-id="textarea-message"
                                  required
                                  rows="8"></textarea>
                        <div class="invalid-feedback">
                            <%= _lc( 'VALIDATION_INPUT_REQUIRED' ) %>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <a href="#/home" class="btn btn-secondary btn-sm">
                        <%= _lc( 'BTN_CANCEL' ) %>
                    </a>
                    <button type="button"
                            data-id="btn-send-message"
                            class="btn btn-sm btn-primary">
                        <%= _lc( 'BTN_SEND_MESSAGE' ) %>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>