%# 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-config="<% $Config %>" data-maps="<% $Maps %>" data-layout="<% $Layout || '' %>" >
  <div id="lifeycycle-ui-edit-node" class="lifeycycle-ui-edit-node collapse card card-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="form-check mb-1">
        <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" 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 class="row mt-2">
      <div class="col-12 text-end">
        <button class="btn btn-light" id="CancelNode"><&|/l&>Cancel</&></button>
        <button class="btn btn-primary" id="SaveNode"><&|/l&>Save</&></button>
      </div>
    </div>
  </div>

  <div class="row mt-2">
    <div class="col-12">
      <svg></svg>
    </div>
  </div>

  <div class="row">
    <div class="col-auto">
      <span class="current-value form-control">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="enableSimulation" name="enableSimulation" />
          <label class="form-check-label" for="enableSimulation">
            <span class="prev-icon-helper"><&|/l&>Auto Layout</&></span>\
<% GetSVGImage( Name => 'info', ExtraClasses => 'icon-helper', Title => loc("Auto layout automatically spaces out statuses. Uncheck to manually reposition your lifecycle."), Size => 12 ) |n %>
          </label>
        </div>
      </span>
    </div>
  </div>
  <div class="row">
    <div class="col-auto">
      <p>
        <&|/l&>Click in the open space to <strong>add a status</strong>.<br>
Click on the status text to <strong>edit</strong> the status.<br>
Click and drag a status node to <strong>change the graph layout</strong>.<br>
Control + click on a status and drag to another to <strong>add a transition</strong>.<br>
Click on a status node to select it and press 'd' to <strong>delete</strong>.<br>
<strong>Click on a transition line</strong> to delete.<br></&>
      </p>
    </div>
  </div>
</div>

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

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