%# BEGIN BPS TAGGED BLOCK {{{
%#
%# COPYRIGHT:
%#
%# This software is Copyright (c) 1996-2026 Best Practical Solutions, LLC
%#                                          <sales@bestpractical.com>
%#
%# (Except where explicitly superseded by other copyright notices)
%#
%#
%# LICENSE:
%#
%# This work is made available to you under the terms of Version 2 of
%# the GNU General Public License. A copy of that license should have
%# been provided with this software, but in any event can be snarfed
%# from www.gnu.org.
%#
%# This work is distributed in the hope that it will be useful, but
%# WITHOUT ANY WARRANTY; without even the implied warranty of
%# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
%# General Public License for more details.
%#
%# You should have received a copy of the GNU General Public License
%# along with this program; if not, write to the Free Software
%# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
%# 02110-1301 or visit their web page on the internet at
%# http://www.gnu.org/licenses/old-licenses/gpl-2.0.html.
%#
%#
%# CONTRIBUTION SUBMISSION POLICY:
%#
%# (The following paragraph is not intended to limit the rights granted
%# to you to modify and distribute this software under the terms of
%# the GNU General Public License and is only of importance to you if
%# you choose to contribute your changes and enhancements to the
%# community by submitting them to Best Practical Solutions, LLC.)
%#
%# By intentionally submitting any modifications, corrections or
%# derivatives to this work, or any other work intended for use with
%# Request Tracker, to Best Practical Solutions, LLC, you confirm that
%# you are the copyright holder for those contributions and you grant
%# Best Practical Solutions,  LLC a nonexclusive, worldwide, irrevocable,
%# royalty-free, perpetual, license to use, copy, create derivative
%# works based on those contributions, and sublicense and distribute
%# those contributions and any derivatives thereof.
%#
%# END BPS TAGGED BLOCK }}}
<div class="lifecycle-ui" id="lifecycle-<% $id %>" data-lifecycle="<% $Name %>" data-config="<% $Config %>" data-maps="<% $Maps %>" data-layout="<% $Layout || '' %>" >
  <div class="modal" id="lifecycle-ui-edit-node" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title"><&|/l&>Status</&></h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="<&|/l&>Close</&>"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="id" />
          <div class="alert alert-warning invalid-name hidden"><&|/l&>Invalid name</&></div>
          <&| /Elements/LabeledValue, Label => loc('Name') &>
            <input class="form-control" type="text" id="name" name="name" value="" />
          </&>

          <&| /Elements/LabeledValue, Label => loc('Type') &>
              <select class="form-select selectpicker" id="type" name="type">
                <option value="initial"><&|/l&>Initial</&></option>
                <option value="active"><&|/l&>Active</&></option>
                <option value="inactive"><&|/l&>Inactive</&></option>
              </select>
          </&>

          <&| /Elements/LabeledValue, Label => loc('Color') &>
            <div class="d-flex align-items-center gap-3">
              <div class="form-check mb-0">
                <input class="form-check-input" type="checkbox" id="color-use" name="color-use" checked />
                <label class="form-check-label" for="color-use"><% loc('Set status color') %></label>
              </div>
              <div class="input-group w-auto" id="color-inputs">
                <input class="form-control form-control-color" type="color" id="color" name="color" value="#547CCC" />
                <input class="form-control" type="text" id="color-hex" name="color-hex" value="#547CCC" placeholder="#000000" maxlength="7" />
              </div>
            </div>
          </&>

          <&| /Elements/LabeledValue, Label => loc('Description') &>
            <textarea class="form-control" id="status-description" rows="2"></textarea>
            <div class="form-text"><&|/l&>Short status description for users. Tooltip in the editor and ticket viewer.</&></div>
          </&>

          <&| /Elements/LabeledValue, Label => loc('Notes') &>
            <textarea class="form-control" id="status-notes" rows="2"></textarea>
            <div class="form-text"><&|/l&>Additional details for admins and API/AI agents. Not shown in the ticket viewer.</&></div>
          </&>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-danger me-auto" id="DeleteNode"><&|/l&>Delete</&></button>
          <button type="button" class="btn btn-primary" id="SaveNode"><&|/l&>Save</&></button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal" id="lifecycle-ui-edit-transition" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title"><&|/l&>Transition</&></h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="<&|/l&>Close</&>"></button>
        </div>
        <div class="modal-body">
          <div class="form-text mb-3"><&|/l&>Description is shown as a tooltip in the ticket viewer. Notes are details for admins and API/AI agents.</&></div>
%         for my $dir (qw(forward reverse)) {
          <div class="lifecycle-transition-dir mb-2" data-dir="<% $dir %>">
            <div class="fw-bold small mb-1 lifecycle-transition-label"></div>
            <&| /Elements/LabeledValue, Label => loc('Description') &>
              <textarea class="form-control" data-field="description" rows="2"></textarea>
            </&>
            <&| /Elements/LabeledValue, Label => loc('Notes') &>
              <textarea class="form-control" data-field="notes" rows="2"></textarea>
            </&>
          </div>
%         }
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-danger me-auto" id="DeleteTransition"><&|/l&>Delete</&></button>
          <button type="button" class="btn btn-primary" id="SaveTransition"><&|/l&>Save</&></button>
        </div>
      </div>
    </div>
  </div>

  <div class="my-3 alert alert-warning pending-changes hidden">
    <&|/l&>New changes pending. Click "Save Changes" to update the lifecycle.</&>
  </div>

  <div class="row mt-2">
    <div class="col-12">
      <div class="lifecycle-graph border rounded" style="width: 100%; height: 560px;"></div>
    </div>
  </div>

  <div class="row mt-2 mb-3">
    <div class="col-auto">
      <button class="btn btn-light btn-sm" id="AutoArrange" type="button"><&|/l&>Auto-arrange</&></button>\
<% GetSVGImage( Name => 'info', ExtraClasses => 'icon-helper ms-1', Title => loc("Automatically space out the statuses. Drag nodes to fine-tune, then Save to make the arrangement permanent for the viewer."), Size => 12 ) |n %>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <p class="mb-0">
        <&|/l&>Click in the open space to <strong>add a status</strong>.<br>
Click on a status to <strong>edit</strong> or <strong>delete</strong> it.<br>
Click and drag a status to <strong>change the graph layout</strong>.</&>
      </p>
    </div>
    <div class="col-md-6">
      <p class="mb-0">
        <&|/l&>Shift + drag from one status to another to <strong>add a transition</strong>.<br>
Click a transition to select it, then click again to <strong>change its direction</strong>.<br>
Click the pencil on a transition to <strong>edit</strong> or <strong>delete</strong> it.</&>
      </p>
    </div>
  </div>
</div>

<%INIT>
my $id = $Name . '-' . int(rand(2**31));
</%INIT>

<%ARGS>
$Config
$Name
$Maps
$Layout => ''
</%ARGS>
