<!-- Шаблон поля type для страниц hook/{id}, new-hook -->
<script type="text/x-just" data-just="filed_type_selectHookType">
    <div class="form-group col-lg-4 col-xs-12 col-sm-6 col-md-6">
        <label class="control-label" >Type</label>
        <% if(!item_id) { %>
            <select class="form-control select2" id="new-hook-type"  data-placeholder="Select a type" >
                <% for(var i in pmHooks.model.supportedTypes){ %>
                    <option
                        value="<%- pmHooks.model.supportedTypes[i] %>" ><%- pmHooks.model.supportedTypes[i] %>
                    </option>
                <% } %>
            </select>
            <div class="help-block"></div>
        <% } else { %>
            <input type="text" disabled   id="hook-<%- item_id %>-type" value="<%- pmHooks.model.items[item_id].type %>"  class="form-control" maxlength="255">
            <div class="help-block"></div>
        <% } %>
    </div>
</script>

<!-- Шаблон поля when для страниц hook/{id}, new-hook -->
<script type="text/x-just" data-just="filed_type_selectHookWhen">
    <div class="form-group col-lg-4 col-xs-12 col-sm-6 col-md-6">
        <label class="control-label" >When</label>
        <% if(!item_id) { %>
            <select class="form-control select2" id="new-hook-when" data-placeholder="Select when" >
                <% for(var i in pmHooks.model.supportedWhens){ %>
                    <option
                        value="<%- i %>" ><%- pmHooks.model.supportedWhens[i] %>
                    </option>
                <% } %>
            </select>
            <div class="help-block"></div>
        <% } else { %>
            <select class="form-control select2" id="hook-<%- item_id %>-when" data-placeholder="Select when" >
                <% for(var i in pmHooks.model.supportedWhens){ %>
                    <option
                        value="<%- i %>"
                        <% if (String(pmHooks.model.items[item_id].when)==i) { %> selected <% } %>>
                        <%- pmHooks.model.supportedWhens[i] %>
                    </option>
                <% } %>
            </select>
            <div class="help-block"></div>
        <% } %>
    </div>
</script>


<script type="text/x-just" data-just="section_hook_recipients">
    <section class="col-lg-12">
        <div class="box box-info">
            <div class="box-header with-border">
                Recipients<br>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> </button>
                </div>
            </div>
            <div class="box-body">
                <div class="row">
                    <% if(item_id == "new") { %>
                        <~ pmHooks.model.newItem.recipients >
                                <% var recipients_arr = pmHooks.parseRecipientsFromStrToArr(pmHooks.model.newItem.recipients);
                                for(var i in recipients_arr){ %>
                                    <% if(recipients_arr[i] != "") { %>
                                        <div class="form-group col-lg-4 col-xs-12 col-sm-6 col-md-6">
                                            <label class="control-label" >Recipient</label>
                                                <%- recipients_arr[i] %>
                                        </div>
                                    <% } %>
                                <% } %>
                        <~>
                    <% } else { %>
                        <~ pmHooks.model.items[item_id].recipients >
                                <% var recipients_arr = pmHooks.parseRecipientsFromStrToArr(pmHooks.model.items[item_id].recipients);
                                    for(var i in recipients_arr){ %>
                                    <div class="form-group col-lg-4 col-xs-12 col-sm-6 col-md-6">
                                        <label class="control-label" >Recipient</label>
                                            <%- recipients_arr[i] %>
                                    </div>
                                <% } %>
                        <~>
                    <% } %>
                </div>
                <div class="row">
                    <div class="form-group col-lg-12">

                            <button
                                    type="button"
                                    onclick="spajs.showLoader(pmHooks.showEditRecipientsForm('<%- item_id %>')); return false;"
                                    class="btn btn-primary hidden-xs"
                                    >Edit recipients</button>

                            <button type="button"
                                    onclick="spajs.showLoader(pmHooks.openNewRecipientModal('<%- item_id %>')); return false;"
                                    class="btn btn-primary hidden-xs"
                                    >Add new recipient</button>

                            <div style="margin-top:10px;" class="hidden-xs hidden-md hidden-lg"></div>


                            <button
                                    type="button"
                                    onclick="spajs.showLoader(pmHooks.showEditRecipientsForm('<%- item_id %>')); return false;"
                                    class="btn btn-primary btn-block visible-xs"
                                    >Edit recipients</button>

                            <button type="button"
                                    onclick="spajs.showLoader(pmHooks.openNewRecipientModal('<%- item_id %>')); return false;"
                                    class="btn btn-primary btn-block visible-xs"
                                    >Add new recipient</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
</script>


<!-- Шаблон модального окна добавления нового recipient -->
<script type="text/x-just" data-just="new-recipient-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">New recipient</h4>
      </div>
      <!-- Основное содержимое модального окна -->
      <div class="modal-body">
             <div class="form-group">
                <label class="control-label" >Recipient</label>
                <input type="text" class="form-control" placeholder="Recipient" id="new_recipient">
                <div class="help-block" onmouseenter="$(this).children().popover();">
                    Enter hook recipient
                    <span class="glyphicon glyphicon-question-sign"
                        role="button"
                        data-trigger="hover"
                        title=""
                        data-placement="top"
                        data-html="true"
                        <% if (item_id == "new") { %>
                            <% if ($("#new-hook-type").val() == "HTTP") { %>
                               data-content="For example recipient URL may be like this: `http://example.com/hook_trigger`"
                            <% } else { %>
                               data-content="For example recipient script may be like this: `hook-script.sh`"
                            <% } %>
                        <% } else { %>
                            <% if (pmHooks.model.items[item_id].type == "HTTP") { %>
                               data-content="For example recipient URL may be like this: `http://example.com/hook_trigger`"
                            <% } else { %>
                               data-content="For example recipient script may be like this: `hook-script.sh`"
                            <% } %>
                        <% } %>
                        data-original-title="Hook recipient"></span>
                </div>
            </div>
      </div>
      <!-- Футер модального окна -->
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" onclick="spajs.showLoader(pmHooks.addNewRecipient('<%- item_id %>'));  return false;">Save</button>
      </div>
    </div>
  </div>
</script>


<!-- Шаблон секции редактирования списка recipient -->
<script type="text/x-just" data-just="edit_hook_recipients">
    <div class="row" id="edit_hook_recipients">
        <section class="col-lg-12">
            <div class="box box-info">
                <div class="box-header with-border">
                    Edit recipients<br>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="form-group col-lg-12">
                            <select class="form-control select2" id="polemarch-model-recipients-select" multiple="multiple" data-placeholder="" >
                                <% if (item_id == "new") { %>
                                    <% var recipients_arr = pmHooks.parseRecipientsFromStrToArr(pmHooks.model.newItem.recipients);
                                    for (var i in recipients_arr) { %>
                                            <option
                                                value="<%- recipients_arr[i] %>"
                                                selected>
                                                <%- recipients_arr[i] %></option>
                                    <% } %>
                                <% } else { %>
                                    <% var recipients_arr = pmHooks.parseRecipientsFromStrToArr(pmHooks.model.items[item_id].recipients);
                                    for (var i in recipients_arr) { %>
                                        <option
                                            value="<%- recipients_arr[i] %>"
                                            selected>
                                            <%- recipients_arr[i] %></option>
                                    <% } %>
                                <% } %>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-lg-12">
                            <button type="button" onclick="$('#edit_hook_recipients').hide(); spajs.showLoader(pmHooks.setRecipients('<%- item_id %>', $('#polemarch-model-recipients-select').val())); return false;" class="btn btn-primary" >Save</button>
                            <button type="button" onclick="$('#edit_hook_recipients').remove(); return false;" class="btn btn-default" >Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</script>