Jaml.register('user_edit', function(user) {
  div({cls: 'user_edit', style: 'display: none'},
    div({cls: 'name_pass'},
      h3(span("1"), Jaml.t("Your details")),
      div({cls: 'row'},
        label(Jaml.t("First Name")),
        input({type: 'text', cls: 'txt', name: 'first_name', value: user.data.first_name || ''})
      ),
      div({cls: 'row'},
        label(Jaml.t("Last Name")),
        input({type: 'text', cls: 'txt', name: 'last_name', value: user.data.last_name || ''})      
      ),
      div({cls: 'row'},
        label(Jaml.t("Mobile") + " #"),
        input({type: 'text', cls: 'txt', name: 'phone', value: user.data.phone || ''})
      ),
      div({cls: 'row'},
        label(Jaml.t("Email")),
        input({type: 'text', cls: 'txt', name: 'email', value: user.data.email || ''})
      ),
      div({cls: 'sep'},
        span(Jaml.t("Change password <b>(optional)</b>"))
      ),
      div({cls: 'row'},
        label({cls: 'pass'}, Jaml.t("New Password")),
        input({type: 'text', cls: 'txt pass', name: 'password'})
      ),
      div({cls: 'row'},
        label({cls: 'pass'}, Jaml.t("Confirm")),
        input({type: 'text', cls: 'txt pass', name: 'password_confirmation'})
      )
    ),
    div({cls: 'address'},
      h3(span("2"), Jaml.t("Address")),
      div({cls: 'addresses'},
        Jaml.render('user_edit_address_row', user.data.addresses)
      ),
      div({cls: 'row'},
        a({href: '#', cls: 'another_address'}, Jaml.t("Add another address"))
      )
    ),
    div({cls: 'billing'},
      h3(span("3"), Jaml.t("Billing preferences - SECURE")),
      div({cls: 'row'},
        Jaml.t("Save my credit card details"),
        input({type: 'checkbox', name: 'save_credit_cards'})
      )
    ),
    div({cls: 'notifications'},
      h3(span("4"), "Notifications"),
      div({cls: 'row h'},
        span({cls: 'email'}, 'Email'),
        span({cls: 'sms'}, 'SMS')
      ),
      div({cls: 'row'},
        label("Order confirmations"),
        Jaml.render('checkbox', {
          checked: user.data.notifications_order_conf_email, 
          options: {cls: 'l', type: 'checkbox', name: 'notifications_order_conf_email'}
        }),
        Jaml.render('checkbox', {
          checked: user.data.notifications_order_conf_sms, 
          options: {type: 'checkbox', name: 'notifications_order_conf_sms'}
        })
      ),
      div({cls: 'row'},
        label("Special offers"),
        Jaml.render('checkbox', {
          checked: user.data.notifications_special_offers_email, 
          options: {cls: 'l', type: 'checkbox', name: 'notifications_special_offers_email'}
        }),
        Jaml.render('checkbox', {
          checked: user.data.notifications_special_offers_sms, 
          options: {type: 'checkbox', name: 'notifications_special_offers_sms'}
        })
      ),
      div({cls: 'row'},
        label("News and Updates"),
        Jaml.render('checkbox', {
          checked: user.data.notifications_news_updates_email, 
          options: {cls: 'l', type: 'checkbox', name: 'notifications_news_updates_email'}
        }),
        Jaml.render('checkbox', {
          checked: user.data.notifications_news_updates_sms, 
          options: {type: 'checkbox', name: 'notifications_news_updates_sms'}
        })
      ),
      div({cls: 'row'},
        label(""),
        a({href: '#', cls: 'l update_user'}, Jaml.t("Save"))
      )
    ),
    div({style: 'clear: both;'})
  );

});

Jaml.register('user_edit_address_row', function(address, idx){
  
  if(address.idx) idx = address.idx;
  
  sel = { n : 'address['+idx+'][postcode]', o : address.postcode || '' };
 
  div({cls: 'address_row', style: (address.hide ? 'display: none' : '')},
    div({cls: 'row'},
      label(""),
      select({name: 'address['+idx+'][nickname]'}, 
        Jaml.render('options_for_select', {
          options: [Jaml.t("Main address"), Jaml.t("Home"), Jaml.t("Work"), Jaml.t("Other")],
          selected: address.nickname || ''
        })
      )
    ),
    div({cls: 'row'},
      label(Jaml.t("Address")),
      input({type: 'text', cls: 'txt', name: 'address['+idx+'][address_1]', value: address.address_1 || ''})
    ),
    div({cls: 'row'},
      label(""),
      input({type: 'text', cls: 'txt', name: 'address['+idx+'][address_2]', value: address.address_2 || ''})
    ),
    div({cls: 'row'},
      label(Jaml.t("Town")),
      input({type: 'text', cls: 'txt', name: 'address['+idx+'][town]', value: address.town || ''})
    ),
    div({cls: 'row postcode'},
      label(Jaml.t("Postcode")),
      input({type: 'text', cls: 'txt postcode', name: 'address['+idx+'][postcode]', value: address.postcode || ''}),
      idx > 0 ? (
        a({href: '#', cls: 'remove_address'}, Jaml.t('remove'))
      ) : ''
    ),
    div({cls: 'row'},
      a({href: '#', cls: 'extra_delivery_info'}, Jaml.t("Add extra delivery instructions"))
    )
  )
  
});

Jaml.register('options_for_select', function(opt){
  for(var i=0; i< opt.options.length; i++){
    var cls = opt.options[i] == opt.selected ? {selected: 'selected'} : {};
    option(cls, opt.options[i])
  }
});

Jaml.register('checkbox', function(chk){
  var cls = chk.options || {};
  if(chk.checked) cls.checked = 'checked';
  input(cls)
});