#set($postiz = $testbench.getBean("postizManager"))
#set($chathome = $context.findPathValue("chathome"))

#if($frame.postizkey)
  #set($integrations = $postiz.listIntegrations(${frame.postizkey}))
#end


<div class="container my-3">
  <h4 class="mb-3">Frame Info</h4>
  <table class="table table-sm table-borderless">
    <tr>
      <th scope="row">Next Run</th>
      <td>$context.getDateTime($frame.nextrun)</td>
    </tr>
    <tr>
      <th scope="row">Last Run</th>
      <td>$context.getDateTime($frame.lastrun)</td>
    </tr>
    <tr>
      <th scope="row">Interval</th>
      <td>$frame.interval</td>
    </tr>
    <tr>
      <th scope="row">State</th>
      <td>$frame.state</td>
    </tr>
  </table>
 

  <h5 class="mt-4">STATE</h5>
  <pre class="bg-light p-3 border rounded">$frame._state</pre>

  <h5 class="mt-4">Properties</h5>
  <table class="table table-striped table-bordered table-sm">
    <thead class="table-light">
      <tr>
        <th>Key</th>
        <th>Value</th>
      </tr>
    </thead>
    <tbody>
      #foreach($k in $frame.properties.keySet())
        <tr>
          <td>$k</td>
          <td>$frame.properties.get($k)</td>
        </tr>
      #end
    </tbody>
  </table>
</div>

<div class="container">
<form method="post"
      action="${chathome}/saveframe.html"
      data-ajax-post="true"
      data-target="#integration-target"
      onsubmit="collectIntegrationValues(this)"
      class="mx-auto"
     >
  #set($details = $testbench.getFrameManager().createDetailsForFrame($frame.framesource))
  $context.putPageValue("searcher", $mediaarchive.getSearcher("framenode"))
  $context.putPageValue("details", $details)
  $context.putPageValue("data", $frame)
$details
  $pages.include("$apphome/components/xml/detaileditor.html", $context)

  <ul class="list-group">
    #set($current = $frame.getValues("integrations"))
    $current
    #foreach($int in $integrations)
      #set($subs = $postiz.listIntegrationChannels($frame.postizusername, $frame.postizpassword, $int.id))

      <li class="list-group-item bg-dark text-light">
        <div>
          <strong>$int.name</strong><br/>
          <small class="text-muted">@$int.profile</small><br/>
          <small class="text-info">$int.identifier</small>
        </div>

        <div class="mt-2">
          #if($subs && $subs.size() > 0)
            #foreach($sub in $subs)
              #set($val = "${int.id}:$sub.id")
              <label class="d-block">
                <input type="checkbox"
                       class="integration-checkbox"
                       value="$val"
                       #if($current.contains($val)) checked="checked" #end />
                $sub.name
              </label>
            #end
          #else
            <label>
              <input type="checkbox"
                     class="integration-checkbox"
                     value="$int.id"
                     #if($current.contains($int.id)) checked="checked" #end />
              $int.name
            </label>
          #end
        </div>
      </li>
    #end
  </ul>

  <!-- required for updateData -->
  <input type="hidden" name="field" value="integrations"/>
  <input type="hidden" name="integrations.value" value=""/>
  <input type="hidden" name="frameid" value="$frame.id"/>

  <button type="submit" class="btn btn-primary mt-3">Save</button>
</form>

<div id="integration-target"></div>

<script>
function collectIntegrationValues(form) {
  const ids = [];
  $(form).find(".integration-checkbox:checked").each(function() {
    ids.push($(this).val());
  });
  $(form).find("input[name='integrations.value']").val(ids.join("|"));
}
</script>
</div>

#set($listeners = $testbench.query("framelistener").exact("framepath", $frame.getCategoryPath()).search())
#foreach($hit in $listeners)

	$hit.eventstring $hit.hash $hit.framepath <br/>


#end