<div class="gluon-value">
  <div class="gluon-value-title">
    <input data-update="change" type="radio" value="security"<%= attr("id", id..'.1') .. attr("name", id) .. attr("checked", ((self:cfgvalue() or self.default) == "security") and "checked") %> />
    <label<%= attr("for", id..'.1')%>></label>
  </div>
  <div class="gluon-value-field-long">
    <label<%= attr("for", id..'.1') %> class="gluon-value-title"><%:Security mode%></label>
    <br />
    <%| translate(
        'In security mode, the mesh VPN uses an encrypted tunnel to connect to the VPN servers. ' ..
        'The encryption ensures that it is impossible for your internet access provider to see what ' ..
        'data is exchanged over your node.'
    ) %>
    <br />
  </div>
  <div class="gluon-value-field-long-after"></div>
</div>

<div class="gluon-value gluon-value-last">
  <div class="gluon-value-title">
    <input data-update="change" type="radio" value="performance"<%= attr("id", id..'.2') .. attr("name", id) .. attr("checked", ((self:cfgvalue() or self.default) == "performance") and "checked") %> />
    <label<%= attr("for", id..'.2')%>></label>
  </div>
  <div class="gluon-value-field-long">
    <label<%= attr("for", id..'.2') %> class="gluon-value-title"><%:Performance mode%></label>
    <br />
    <%| translate(
        'In performance mode, no encryption is used. This usually allows for higher throughput, but the data exchanged over your node is not ' ..
        'protected against eavesdropping.'
    ) %>
    <br />
  </div>
  <div class="gluon-value-field-long-after"></div>
</div>
