{{ define "content" }}
<link rel="stylesheet" href="/static/css/primitive_edit.css">
<link rel="stylesheet" href="/static/css/common.css">
<script>
  /* It's a glue code.
   * The go template symtax will not work in the script
   * if the script is in a different file. So we pass the
   * template data here.
   */
  window.resourceData = {
    ResourceID: "{{ .ResourceID }}",
    ResourceAgent: "{{ .ResourceAgent }}",
    CreateMode: {{ if .CreateMode }}true{{ else }}false{{ end }}
  };
</script>
<script src="/static/js/XCSS.js"></script>
<script src="/static/js/classes/RAInfoPopup.js"></script>
<script src="/static/js/classes/SelectOption.js"></script>
<script src="/static/js/classes/OperationPopup.js"></script>
<script src="/static/js/classes/DeletePopup.js"></script>
<script src="/static/js/classes/RenamePopup.js"></script>
<script src="/static/js/classes/XAlert.js"></script>
<script src="/static/js/classes/Select.js"></script>
<script src="/static/js/classes/XSelect.js"></script>
<script src="/static/js/classes/Input.js"></script>
<script src="/static/js/classes/OperationInput.js"></script>
<script src="/static/js/classes/XKvGroupBase.js"></script>
<script src="/static/js/classes/XKvGroup.js"></script>
<script src="/static/js/classes/XOperationsKvGroup.js"></script>
<script src="/static/js/classes/XInputsKvGroup.js"></script>
<script src="/static/js/classes/Primitive.js"></script>
<script src="/static/js/classes/Span.js"></script>
<script src="/static/js/primitive_edit.js" defer></script>

<div class="edit-layout">
  <div class="edit-left">

    {{ if .AlertMessage }}
      <x-alert
        type="{{ .AlertType }}"
        message="{{ .AlertMessage }}"
        visible="true">
      </x-alert>
    {{ end }}


    <div style="display: flex; justify-content: space-between; align-items: center;">
      <h2>{{ if .CreateMode }}<i class="fas fa-file"></i> Create Primitive{{ else }}<i class="fas fa-pencil-alt"></i> Edit Primitive: {{ .ResourceID }}{{ end }}</h2>
      {{ if not .CreateMode }}<div id="copy-rename-delete-container">
        <button class="btn btn-white" name="copy" onclick="toggleUpdateCreateMode(true)"><i class="fas fa-copy"></i> Copy</button>
        <button class="btn btn-white" name="rename" onclick="new RenamePopup(window.resourceData.ResourceID)"><i class="fas fa-font"></i> Rename</button>
        <button class="btn btn-white text-danger" name="delete" onclick="new DeletePopup(window.resourceData.ResourceID)"><i class="fas fa-trash"></i> Delete</button>
      </div>{{ end }}
    </div>

    {{ if .CreateMode }}<div class="primitive-create-panel">{{ end }}
    <div class="form-section">
      <div class="kvsection-row">
        <label>Resource ID</label>
        <input
          id="input-primitive-id"
          type="text"
          value="{{ .ResourceID }}"
          class="form-control"
          name="primitive[id]"
          {{ if not .CreateMode }}readonly{{ end }}
          style="width:60%;"
        >
      </div>

      <x-select
        id="class-xselect"
        select-name="primitive[clazz]"
        {{ if .CreateMode }}light-dom{{ end }}
        label="Class"
        description="Standard which the resource agent conforms to."
        value="{{ .Class }}"
        options-api="/api/cib/primitive/classes/fetch"
        {{ if .CreateMode }}append-blank="true"{{ end }}
        disabled="{{ if .CreateMode }}false{{ else }}true{{ end }}">
      </x-select>

      <x-select
        id="provider-xselect"
        select-name="primitive[provider]"
        {{ if .CreateMode }}light-dom{{ end }}
        label="Provider"
        description="Vendor or project which provided the resource agent."
        value="{{ .Provider }}"
        options-api="/api/cib/primitive/providers/fetch"
        defer-init="true"
        disabled="{{ if .CreateMode }}false{{ else }}true{{ end }}"
        hide-when-empty="true">
      </x-select>

      <x-select
        id="type-xselect"
        select-name="primitive[type]"
        {{ if .CreateMode }}light-dom{{ end }}
        label="Type"
        description="Resource agent name."
        value="{{ .Type }}"
        options-api="/api/cib/primitive/types/fetch"
        defer-init="true"
        disabled="{{ if .CreateMode }}false{{ else }}true{{ end }}">
      </x-select>

      <button class="btn btn-white btn-info" id="agent-info-button" onclick="showAgentInfo()" {{ if .CreateMode }}disabled{{ end }}>
        <i class="fas fa-info"></i>
      </button>
    </div>

    <div class="accordion">
      <div id="primitive-fields">{{ if not .CreateMode }}{{ template "primitive_fields" . }}{{ end }}</div>
      <template id="primitive-fields-template">{{ template "primitive_fields" . }}</template>

      <div style="margin-top: 20px; text-align: center;">
        <button id="apply-create-button" name="submit" class="btn btn-success" onclick="clickApplyCreateButton(this)" {{ if .CreateMode }}disabled{{ end }}>{{ if .CreateMode }}Create{{ else }}Apply{{ end }}</button>
        <!-- I would rather expect `onclick="history.back()"` however old hawk forwards to /cib/live/config/edit -->
        <a class="btn btn-white" href="{{ if .CreateMode }}/cib/live/resources/types{{ else }}/cib/live/config/edit{{ end }}">Back</a>
      </div>

    </div>
    {{ if .CreateMode }}</div>{{ end }}
  </div>
  <div class="edit-right">
    <h4>Primitive</h4>
    <p>Primitive resources are the most basic type of resource.</p>
    <p>To create a primitive, define an ID and specify some parameters like class, provider, and type.</p>
    <p>An example of a primitive resource is <code>ocf:heartbeat:IPaddr</code>, which can be used to configure a floating IP address for your cluster.</p>
    <br>
    <h4 id="agent-shortdesc"></h4><div id="agent-longdesc"></div>
    <br>
    <h4 id="field-shortdesc"></h4><p id="field-longdesc"></p>
  </div>
</div>
{{ end }}

{{ define "primitive_fields" }}
      <details id="details-instance_attributes" open>
        <summary><strong>Parameters</strong></summary>
        <x-kvgroup
          id="kvgroup-instance_attributes"
          name="instance_attributes"
          resource-id="{{ .ResourceID }}"
          resource-agent="{{ .ResourceAgent }}"
          options-api="/api/cib/resource/params/fetch"
          submit-api="/api/cib/resource/params/submit">
        </x-kvgroup>
      </details>

      <details id="details-operations" open>
        <summary><strong>Operations</strong></summary>
        <x-operations-kvgroup
          id="kvgroup-operations"
          {{ if .CreateMode }}create-mode light-dom{{ end }}
          resource-id="{{ .ResourceID }}"
          resource-agent="{{ .ResourceAgent }}"
          options-api="/api/cib/resource/operations/fetch"
          submit-api="/api/cib/resource/operations/submit">
        </x-operations-kvgroup>
      </details>

      <details id="details-meta_attributes" open>
        <summary><strong>Meta Attributes</strong></summary>
        <x-kvgroup
          id="kvgroup-meta_attributes"
          {{ if .CreateMode }}light-dom{{ end }}
          name="meta_attributes"
          resource-id="{{ .ResourceID }}"
          resource-agent="{{ .ResourceAgent }}"
          options-api="/api/cib/resource/meta-attributes/fetch"
          submit-api="/api/cib/resource/meta-attributes/submit">
        </x-kvgroup>
      </details>

      <details open>
        <summary><strong>Utilization</strong></summary>
        <x-inputs-kvgroup
          id="kvgroup-resource_utilizations"
          cib-object="{{ .ResourceID }}"
          options-api="/api/cib/resource/utilizations/fetch"
          submit-api="/api/cib/resource/utilizations/submit">
        </x-inputs-kvgroup>
      </details>

{{ end }}