<!--
    SVG icons on this page comes from:
    https://www.svgrepo.com/collection/iconcino-interface-icons/
-->
<h1>Feature Flags</h1>
  <%
       var nonreq_feature_flags = [];
       for (var i = 0; i < feature_flags.length; i++) {
         if (feature_flags[i].stability == 'required')
           continue;
         nonreq_feature_flags.push(feature_flags[i]);
       }
  %>
  <div id="ff-disabled-stable-warning" class="warning" style="display: none;">
      <p>
      All stable feature flags must be enabled after completing an upgrade.
      Without enabling all flags, upgrading to future minor or major versions
      of RabbitMQ may not be possible.
      <a href="https://www.rabbitmq.com/docs/feature-flags">[Learn more]</a>
      </p>
      <button id="ff-enable-all-button">Enable all stable feature flags</button>
  </div>
<div class="section" id="feature-flags">
  <h2>Feature Flags</h2>
  <div class="hider">
<%= filter_ui(nonreq_feature_flags) %>
  <div id="ff-table-section" class="updatable">
<% if (nonreq_feature_flags.length > 0) { %>
<div id="ff-feature-flags-data" hidden
     data-feature-flags="<%= fmt_escape_html0(JSON.stringify(nonreq_feature_flags)) %>"></div>

<style>
.specificities_icons svg {
    width: 16px;
    height: 16px;
}

#ff-exp-dialog {
    width: 600px;
}

#ff-exp-dialog h3 {
    font-size: 2em;
    margin-top: 0;
}

#ff-exp-dialog svg {
    width: 60px;
    height: 60px;
}

#ff-exp-dialog.ff-exp-unsupported #ff-exp-ack-supported {
    display: none;
}

#ff-exp-dialog.ff-exp-supported #ff-exp-ack-unsupported {
    display: none;
}

#ff-exp-dialog button {
    display: inline-block;
    margin-right: 1em;
}

.ff-name {
    font-family: monospace;
}
</style>

<table class="list">
  <thead>
    <tr>
      <th><%= fmt_sort('Name', 'name') %></th>
      <th class="c">Specificities</th>
      <th class="c"><%= fmt_sort('State', 'state') %></th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <%
       for (var i = 0; i < nonreq_feature_flags.length; i++) {
         var feature_flag = nonreq_feature_flags[i];
    %>
       <tr<%= alt_rows(i)%>>
         <td><%= fmt_string(feature_flag.name) %></td>
         <td class="specificities_icons ff-stability-<%= fmt_string(feature_flag.stability) %> ff-state-<%= fmt_string(feature_flag.state) %>">
           <% if (feature_flag.callbacks.includes('enable')) { %>
           <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="has_migration_icon">
               <title>This feature flags has a migration function which might take some time and consume resources.</title>
               <path d="M20.9844 10H17M20.9844 10V6M20.9844 10L17.6569 6.34315C14.5327 3.21895 9.46734 3.21895 6.34315 6.34315C3.21895 9.46734 3.21895 14.5327 6.34315 17.6569C9.46734 20.781 14.5327 20.781 17.6569 17.6569C18.4407 16.873 19.0279 15.9669 19.4184 15M12 9V13L15 14.5" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
           <% } %>
           <% if (feature_flag.stability == 'experimental') { %>
           <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="experimental_icon">
               <title>This is an experimental feature flag</title>
               <path d="M10 4V10L5.20285 16.8531C4.27496 18.1786 5.22327 20 6.84131 20H17.1587C18.7767 20 19.725 18.1786 18.7972 16.8531L14 10V4M10 4H14M10 4H8M14 4H16" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
           <% } %>
           <% if (feature_flag.experiment_level == 'unsupported') { %>
           <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
               <title>This experimental feature flag is not yet supported at this stage and an upgrade path is not guaranteed</title>
               <path d="M12 15H12.01M12 12V9M4.98207 19H19.0179C20.5615 19 21.5233 17.3256 20.7455 15.9923L13.7276 3.96153C12.9558 2.63852 11.0442 2.63852 10.2724 3.96153L3.25452 15.9923C2.47675 17.3256 3.43849 19 4.98207 19Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
           <% } %>
         </td>
         <td class="c ff-stability-<%= fmt_string(feature_flag.stability) %> ff-state-<%= fmt_string(feature_flag.state) %>">
           <input id="ff-checkbox-<%= fmt_string(feature_flag.name) %>" type="checkbox" class="toggle"
                  data-flag-name="<%= fmt_string(feature_flag.name) %>"
                  <% if (feature_flag.state == 'enabled') { %>
                  checked disabled
                  <% } %>
                  <% if (feature_flag.state == 'state_changing') { %>
                  disabled
                  <% } %>
                  />
           <label for="ff-checkbox-<%= fmt_string(feature_flag.name) %>" class="toggle"/>
         </td>
         <td>
         <p><%= fmt_string(feature_flag.desc) %></p>
         <% if (feature_flag.doc_url) { %>
         <p><a href="<%= fmt_string(feature_flag.doc_url) %>">[Learn more]</a></p>
         <% } %>
         </td>
       </tr>
    <% } %>
  </tbody>
</table>
<% } else { %>
    <p>... no feature_flags ...</p>
<% } %>
  </div>
  </div>
</div>
<dialog id="ff-exp-dialog">
    <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 15H12.01M12 12V9M4.98207 19H19.0179C20.5615 19 21.5233 17.3256 20.7455 15.9923L13.7276 3.96153C12.9558 2.63852 11.0442 2.63852 10.2724 3.96153L3.25452 15.9923C2.47675 17.3256 3.43849 19 4.98207 19Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    <h3>Enabling an experimental feature flag</h3>
    <p>
    <strong>The <code class="ff-name"></code> feature flag is experimental</strong>.
    This means the functionality behind it is still a work in progress. Here
    are a few important things to keep in mind:
    </p>
    <ol>
    <li id="ff-exp-ack-supported">
    <p>
    Before enabling it, make sure to <strong>try it in a test environment
    first</strong> before enabling it in production.
    </p>
    <p>
    The feature flag is supported even though it is still experimental.
    Therefore, upgrades to a later version of RabbitMQ with this feature flag
    enabled are supported.
    </p>
    <p>
    <input id="ff-exp-ack-supported-checkbox" type="checkbox"/>
    <label for="ff-exp-ack-supported-checkbox">I understand that this feature is experimental and should be tested first.</label>
    </p>
    </li>
    <li id="ff-exp-ack-unsupported">
    <p>
    This development of this feature is at an early stage. Support is not
    provided and enabling it in production is not recommended.
    </p>
    <p>
    Once it is enabled, upgrades to a future version of RabbitMQ is not
    guaranteed! If there is no upgrade path, you will have to use a
    <a href="https://www.rabbitmq.com/docs/blue-green-upgrade" target="_blank">blue-green migration</a>
    to upgrade RabbitMQ.
    </p>
    <p>
    <input id="ff-exp-ack-unsupported-checkbox1" type="checkbox"/>
    <label for="ff-exp-ack-unsupported-checkbox1">I understand that <strong>support is not provided</strong>.</label>
    </p>
    <p>
    <input id="ff-exp-ack-unsupported-checkbox2" type="checkbox"/>
    <label for="ff-exp-ack-unsupported-checkbox2">I understand that this there is <strong>no guaranteed upgrade path</strong>.</label>
    </p>
    </li>
    <li>
    If you enable it,
    <a href="https://github.com/rabbitmq/rabbitmq-server/discussions" target="_blank">please give feedback</a>,
    this will help the RabbitMQ team polish it and make it stable as soon as
    possible.
    </li>
    </ol>
    <button id="ff-exp-confirm">Enable <span class="ff-name"></span></button>
    <button id="ff-exp-cancel">Cancel</button>
</dialog>
