[% PROCESS _header.tt js="plugins/${plugin_name}/reports-${fileversion}.js" %]
[% PROCESS _message.tt %]
[% USE date %]

<div class="flexrow h-full">
  [% PROCESS _infobox.tt extra_classes="2xl:block hidden order-2" %]

  <form action="reports2.cgi" method="POST" class="w-[800px] h-full" onsubmit="setFormBtnSpinner(this)">
    <input type="submit" name="send" value="save" style="display:none"><!-- make enter submit the form -->
    <input type="hidden" name="action" value="save">
    <input type="hidden" name="report" value="[% r.nr %]">
    <input type="hidden" name="CSRFtoken" value="[% get_user_token(c) %]">
    <div class="card w-full flexcol gap-0 flex-nowrap h-full min-h-[600px]">
      <div class="head justify-between" style="flex: 0 0 40px;">
        <a href="reports2.cgi" class="button header-button rounded w-[70px]" title="Go back to report list">
          <i class="uil uil-angle-double-left"></i>Back
        </a>
        <h3>[% IF r.nr != "new" %]Edit[% ELSE%]Create[% END %] Report</h3>
        <div class="w-[70px]"></div>
      </div>
      <div class="h-full overflow-auto" id="report_attributes">
        <table class="body cellspacing striped">
          <tbody>
            <tr>
              <th class="min-w-[240px]">Name <span class="required">*</span></th>
              <td colspan=2>
                <div class="flexrow flex-nowrap gap-x-1">
                  <input type="text" name="name" value="[% r.name | html %]" class="w-full">
                  <div>
                    <a href="" class="link ml-1" onclick="overcard({'bodyCls': 'p-2', 'draggable': true, 'bodyEl': 'macro_help', 'caption': 'Help', 'width': 500 }); return false;">
                      <i class="fa-solid fa-circle-question"></i>
                    </a>
                    <div class="hidden" id="macro_help">
                      <p>Macros are replaced by the report engine during rendering of the report.</p>
                      <p>Macros can be used in the name and description of the report.</p>
                      <p>Examples:</p>
                      <p class="mt-4">
                        <ul>
                          <li><b class="js-copy-to-clipboard clickable">{{ date:start, &quot;format&quot;}}</b> - inserts report start date with given format</li>
                          <li><b class="js-copy-to-clipboard clickable">{{ date:end, &quot;format&quot;}}</b> - inserts report end date with given format</li>
                          <li><b class="js-copy-to-clipboard clickable">{{ date:now, &quot;format&quot;}}</b> - inserts current date with given format</li>
                        </ul>
                      </p>
                      <p class="mt-4">Date format uses POSIX format strings, ex.:</p>
                      <p>
                        <ul>
                          <li><b>%Y</b> - year</li>
                          <li><b>%m</b> - month</li>
                          <li><b>%b</b> - month in current locale</li>
                          <li><b>%d</b> - day</li>
                          <li><b>%H</b> - hour</li>
                          <li><b>%M</b> - minute</li>
                          <li><b>%S</b> - second</li>
                        </ul>
                      </p>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <th class="align-top">Description</th>
              <td colspan=2><textarea name="desc" wrap="hard" cols="56" class="w-full">[% r.desc %]</textarea></td>
            </tr>
            [% IF c.check_user_roles('admin') %]
            <tr>
              <th>Owner</th>
              <td colspan=2>
                <input type='text' id="owner" name="owner" value="[% r.user | html %]" onfocus="this.click()" onclick="ajax_search.init(this, 'contact', { url: 'status.cgi?format=search', autosubmit:false, striped: true })" class="w-full">
              </td>
            </tr>
            [% END %]
            <tr>
              <th class="align-top">Permissions</th>
              <td colspan=2 class="p-1">
                <table id="permissions" class="w-full">
                  <tr[% IF r.permissions.size == 0 %] style="display: none;"[% END %]>
                    <th>Type</th>
                    <th>Contact/Group</th>
                    <th>Permissions</th>
                    <th></th>
                  </tr>
                  [% PROCESS _permission_edit.tt nr=0 p={type => "user", name="", perm => "ro"} %]
                  [% FOREACH p = r.permissions %]
                    [% PROCESS _permission_edit.tt nr=loop.index + 1 p=p %]
                  [% END %]
                  <tr>
                    <td colspan=4 onclick="permission_add_row('permissions'); return false;" class="min-w-[100px] whitespace-nowrap clickable hoverable rounded">
                      <i class="uil uil-angle-down text-lg leading-3" title="add new permission entry"></i> add permission
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            [% IF backends.size > 10 %]
            <tr>
              <th class="align-top">Backends</th>
              <td colspan=2>
              [% PROCESS _backends_select_multi.tt param_name='report_backends' selected_backends=r.backends can_edit=1 onchange="reports_update_affected_sla_objects(this)" %]
              </td>
            </tr>
            [% ELSIF backends.size > 1 %]
            <tr>
              <th class="align-top">Backends</th>
              <td colspan=2>
                [% backends_selected=0 %]
                [% IF r.backends.size > 0 %][% backends_selected=1 %][% END %]
                <div class="align-center flexrow gap-1">
                  <input type="checkbox" id="report_backends_toggle" name="report_backends_toggle"[% IF backends_selected %] checked[% END %] onclick="toggleElement('report_backends'); reports_update_affected_sla_objects(this);">
                  <span onclick="toggleCheckBox('report_backends_toggle'); toggleElement('report_backends'); reports_update_affected_sla_objects(this);" class="clickable"> Select Backends:</span>
                </div>
                <select id="report_backends" name="report_backends" multiple class="mt-1 w-56" style="min-width: 180px;[% IF !backends_selected %] display: none;[% END %]" onchange="reports_update_affected_sla_objects(this)">
                  [% FOREACH b = backends %]
                  <option value="[% b | html %]"[% FOREACH rb = r.backends %][% IF backends_selected && rb == b %] selected[% END %][% END %]>[% backend_detail.$b.name %]</option>
                  [% END %]
                </select>
              </td>
            </tr>
            [% END %]
            [% IF backends.size > 1 %]
            <tr>
              <th class="align-top">Failed Backends</th>
              <td colspan=2>
                <select name="failed_backends" class="w-56">
                  <option value="cancel"[% IF r.failed_backends == 'cancel' %] selected[% END %]>cancel report</option>
                  <option value="ignore"[% IF r.failed_backends == 'ignore' %] selected[% END %]>ignore the error</option>
                  <option value="print"[%  IF r.failed_backends == 'print'  %] selected[% END %]>ignore the error and add error details page</option>
                </select>
                <br>
                <span class="whitespace-normal text-xs font-normal">choose what happens if some of the selected backends are not available.</span>
              </td>
            </tr>
            [% END %]
            <tr>
              <td colspan=3 class="pt-5"><h3 class="text-center">E-Mail Settings</h3></td>
            </tr>
            <tr>
              <th>To</th>
              <td colspan=2><input type="text" name="to" value="[% r.to | html %]" class="w-full" placeholder="email1, email2, ..."></td>
            </tr>
            <tr>
              <th>Cc</th>
              <td colspan=2><input type="text" name="cc" value="[% r.cc | html %]" class="w-full" placeholder="email1, email2, ..."></td>
            </tr>
            <tr>
              <th class="align-top">Schedule</th>
              <td colspan=2 class="p-1">
                <table id="cron_entries" class="w-full">
                  [% cr = { type => 'month', day => 1, week_day => '', hour => 0, minute => 0, cust => '' } %]
                  [% PROCESS _cron_edit.tt nr=0 can_edit=1 %]
                  [% FOREACH cr = r.send_types %]
                      [% nr = loop.index + 1 %]
                      [% PROCESS _cron_edit.tt can_edit=1 %]
                  [% END %]
                  <tr>
                    <td colspan=4 onclick="add_cron_row('cron_entries'); return false;" class="min-w-[100px] whitespace-nowrap clickable hoverable rounded">
                      <i class="uil uil-angle-down text-lg leading-3" title="add new schedule entry"></i> add more
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr id="report_type">
              <td colspan=3 class="pt-5"><h3 class="text-center">Report Type</h3></td>
            </tr>
            <tr>
              <th>Type</th>
              <td colspan=2>
                <select name="template" class="w-56" onchange="update_reports_type('[% r.nr %]', this.value)">
                  [% found=0 %]
                  [% FOREACH file = templates.keys.sort %]
                  [% IF templates.$file.deprecated && file != r.template; NEXT; END %]
                    <option value="[% file | html %]"[% IF file == r.template; found=1 %] selected[% END %]>[% templates.$file.name %]</option>
                  [% END %]
                  [% IF !found %]
                    <option value="[% r.template | html %]" selected>[% r.template | html %]</option>
                  [% END %]
                </select>
              </td>
            </tr>
            <tr id="new_reports_options">
              <td colspan=3 class="pt-5"><h3 class="text-center">Report Options</h3></td>
            </tr>
            [% IF template_exists %]
              [% PROCESS reports_edit_step2.tt %]
            [% ELSE %]
              <tr class="js-report-options">
                <td colspan=3 class="pt-5 text-center">
                  <span class="textALERT">
                    <b>Error:</b> The report template '[% r.template | html %]' does not exist!
                  </span>
                </td>
              </tr>
            [% END %]
          </tbody>
        </table>
      </div>
      <div class="footer justify-evenly" style="flex: 0 0 40px;">
          [% IF r.nr != "new" %]<button name="action" value="remove" class="hover-red w-32" onclick="return(confirm('really remove report: [% r.name | html %]?'))"><i class="uil uil-trash-alt"></i> Delete</button>[% END %]
          <button class="submit w-44 green"><i class="uil uil-save"></i> Save Report</button>
          [% IF r.nr != "new" %]<button name="action" value="clone" class="w-32"><i class="uil uil-copy"></i> Clone Report</button>[% END %]
      </div>
    </div>
  </form>
</div>


<script>
<!--
  var inp = jQuery('SELECT[name=template]');
  if(inp && inp.length > 0) {
    reports_update_affected_sla_objects(inp[0]);
  }
  // preserve filter and tab on save
  jQuery("FORM").on('submit', preserve_hash);
  jQuery("FORM A").on('click', preserve_hash);
  jQuery("FORM").on('submit', function() {
    jQuery("FORM").find(".template").remove();
  });
-->
</script>

[% PROCESS _footer.tt %]
