<%
  var _action   = locals.action   || '#';
  var _method   = locals.method   || 'post';
  var _error    = locals.error    || '';
  var _errors   = locals.errors   || {};
  var _initial  = locals.initial  || {};
%>

  <% if (_error) { %>
  

    
    <%= _error %>
  
  <% } %>

  <%- include('../../../ui/Input', {
    id:    'profile-name',
    label: 'Display Name',
    type:  'text',
    name:  'name',
    placeholder: 'Jane Doe',
    value: _initial.name || '',
    error: _errors.name
  }) %>

  <%- include('../../../ui/Input', {
    id:    'profile-username',
    label: 'Username',
    type:  'text',
    name:  'username',
    placeholder: 'janedoe',
    value: _initial.username || '',
    hint:  'Lowercase letters, numbers and underscores. 3–32 characters.',
    error: _errors.username
  }) %>

  <%- include('../../../ui/Textarea', {
    id:    'profile-bio',
    label: 'Bio',
    name:  'biography',
    rows:  3,
    placeholder: 'Tell us about yourself…',
    value: _initial.biography || '',
    error: _errors.biography
  }) %>

  <%- include('../../../ui/Input', {
    id:    'profile-picture',
    label: 'Profile Picture URL',
    type:  'url',
    name:  'profilePicture',
    placeholder: 'https://example.com/avatar.jpg',
    value: _initial.profilePicture || '',
    iconLeft: '',
    error: _errors.profilePicture
  }) %>

  

    <% if (locals.cancelHref) { %>
    
      Cancel
    
    <% } %>
    <%- include('../../../ui/Button', {
      type: 'submit',
      children: 'Save Profile'
    }) %>