<h1>Feature Flags</h1>
  <%
       var needs_enabling = false;
       for (var i = 0; i < feature_flags.length; i++) {
         var feature_flag = feature_flags[i];
         if (feature_flag.state == "disabled" && feature_flag.stability != "experimental") {
           needs_enabling = true;
         }
       }
  if (needs_enabling) { %>
     <p class="warning">
        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/feature-flags.html">[Learn more]</a>
     </p>
  <% } %>
<div class="section">
  <h2>Feature Flags</h2>
  <div class="hider">
<%= filter_ui(feature_flags) %>
  <div class="updatable">
<% if (feature_flags.length > 0) { %>
<table class="list">
  <thead>
    <tr>
      <th><%= fmt_sort('Name', 'name') %></th>
      <th class="c"><%= fmt_sort('State', 'state') %></th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <%
       for (var i = 0; i < feature_flags.length; i++) {
         var feature_flag = feature_flags[i];
	 if (feature_flag.stability == "experimental") {
	   continue;
	 }
         var state_color = "grey";
         if (feature_flag.state == "enabled") {
           state_color = "green";
         } else if (feature_flag.state == "disabled") {
           state_color = "yellow";
         } else if (feature_flag.state == "unsupported") {
           state_color = "red";
         }
    %>
       <tr<%= alt_rows(i)%>>
         <td><%= fmt_string(feature_flag.name) %></td>
         <td class="c">
           <% if (feature_flag.stability == "experimental") { %>
              <span>Experimental</span>
           <% } else if (feature_flag.stability == "stable" && feature_flag.state == "disabled") { %>
              <p><span>&#9888;</span>Disabled!</p>
           <% } %>
           <% if (feature_flag.state == "disabled") { %>
           <form action="#/feature-flags-enable" method="put" style="display: inline-block" class="enable-feature-flag">
           <input type="hidden" name="name" value="<%= fmt_string(feature_flag.name) %>"/>
           <input type="submit" value="Enable" class="c"/>
           </form>
           <% } else { %>
           <abbr class="status-<%= fmt_string(state_color) %>"
             style="text-transform: capitalize"
             title="Feature flag state: <%= fmt_string(feature_flag.state) %>">
           <%= fmt_string(feature_flag.state) %>
           </abbr>
           <% } %>
         </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>



<div class="section">
  <h2>Experimental Feature Flags</h2>
  <div class="hider">
<% if (feature_flags.length > 0) { %>
<p class="warning">
  Feature flags listed below are experimental. They should not be enabled in a production deployment.
</p>
<table class="list">
  <thead>
    <tr>
      <th><%= fmt_sort('Name', 'name') %></th>
      <th class="c"><%= fmt_sort('State', 'state') %></th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <%
       for (var i = 0; i < feature_flags.length; i++) {
         var feature_flag = feature_flags[i];
	 if (feature_flag.stability != "experimental") {
	   continue;
	 }
         var state_color = "grey";
         if (feature_flag.state == "enabled") {
           state_color = "green";
         } else if (feature_flag.state == "disabled") {
           state_color = "yellow";
         } else if (feature_flag.state == "unsupported") {
           state_color = "red";
         }
    %>
       <tr<%= alt_rows(i)%>>
         <td><%= fmt_string(feature_flag.name) %></td>
         <td class="c">
           <% if (feature_flag.state == "disabled") { %>
	      <div>
              <input id="<%= feature_flag.name %>" type="checkbox" class="riskCheckbox" onclick="this.parentNode.querySelector('.enable-feature-flag input[type=submit]').disabled = !this.checked;">
              <label for="<%= feature_flag.name %>"> I understand the risk</label><br>
	      <br>
              <form action="#/feature-flags-enable" method="put" style="display: inline-block" class="enable-feature-flag">
              <input type="hidden" name="name" value="<%= fmt_string(feature_flag.name) %>"/>
              <input type="submit" value="Enable" class="c" disabled="disabled"/>
	      </div>
           </form>
           <% } else { %>
           <abbr class="status-<%= fmt_string(state_color) %>"
             style="text-transform: capitalize"
             title="Feature flag state: <%= fmt_string(feature_flag.state) %>">
           <%= fmt_string(feature_flag.state) %>
           </abbr>
           <% } %>
         </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>
