<% 
tip = "#{id}_tip"
error = "#{id}_error"

# Used to prevent JS bindings from affecting existing page elements
js_id = SecureRandom.hex

tooltip = tooltip ||= ''
error_handler = error_handler ||= '' 
%>

<div class="form-input">
  <label for="<%= id %>"><%= label ||= '' %></label>
  <input type="<%= type %>" 
         id="<%= id %>" 
         name="<%= name %>" 
         class="left-indent <%= classes ||= '' %>"
         value="<%= val ||= '' %>" 
         aria-describedby="<%= tooltip ||= '' %>" 
         roadmap-js-id="<%= js_id %>" />

  <% 
  # If the field is a password then provide a 'show password' checkbox
  if type == 'password' 
  %>
    <div class="form-input checkbox-right">
      <label for="<%= id %>_show" class="checkbox-label"><%= _('Show password') %></label>
      <input type="checkbox" id="<%= id %>_show" roadmap-js-id="<%= js_id %>_show" />
    </div>
    <script type="text/javascript">
      $("input[roadmap-js-id='<%= js_id %>_show']").click(function(){
        let typ = $(this).parent().siblings("input[roadmap-js-id='<%= js_id %>']").attr('type');
        $(this).parent().siblings("input[roadmap-js-id='<%= js_id %>']").attr('type', (typ === 'password' ? 'text' : 'password'));
      });
    </script>
  <% end %>

  <% 
  # If the field has a tooltip add it and wire it up for on focus/blur
  if !tooltip.blank? 
  %>
    <div role="" id="<%= tip %>" class="tooltip" roadmap-js-id="<%= js_id %>_tip">
      <span class="tooltip-msg"><%= tooltip %></span>
    </div>
    <script type="text/javascript">
      $(document).ready(function(){
        $("input[roadmap-js-id='<%= js_id %>']").focus(function(){
          $(this).siblings('.tooltip').attr('role', 'tooltip');
        }).blur(function(){
          $(this).siblings('.tooltip').attr('role', '');
        });
      });
    </script>
  <% end %>

  <%
  # If an error handler was passed in or the input type has a generic handler
  if !error_handler.blank? || ['email', 'password'].include?(type) 
  %>
    <span role="" id="<%= id %>_error" class="error-tooltip left-indent <%= js_id %>_error"></span>

    <script type="text/javascript">
      $(document).ready(function(){
        let input = $("input[roadmap-js-id='<%= js_id %>']");
        
        let validate_<%= js_id %> = function(val){
          let msg = <%= error_handler.blank? ? "validate#{type.capitalize}(val)" : "#{error_handler}(val)" %>;
          if(msg === '' || val.trim().length <= 0){
            $("span.<%= js_id %>_error").html('').attr('role', '');
            $("input[roadmap-js-id='<%= js_id %>']").removeClass('red-border');
          }else{
            $("span.<%= js_id %>_error").html(__('Error: ') + msg).attr('role', 'tooltip');
            $("input[roadmap-js-id='<%= js_id %>']").addClass('red-border');
          }
        }
        // Run the validation on load to display errors on refresh
        validate_<%= js_id %>($(input).val());
  
        // Run validation check on blur, hide error message on focus
        $(input).on('blur', function(){
          validate_<%= js_id %>($(input).val());
        }).focus(function(){
          $("span.<%= js_id %>_error").attr('role', '');
        });
      });
    </script>
  <% end %>
</div>