def render_AddMembers(self, h, comp, *args):
    value = var.Var('')
    submit_id = h.generate_id('form')
    hidden_id = h.generate_id('hidden')

    with h.form:
        h << h.input(type='text', id=self.text_id)
        h << h.input(type='hidden', id=hidden_id).action(value)
        h << self.autocomplete
        h << h.script(
            u"%(ac_id)s.itemSelectEvent.subscribe(function(sType, aArgs) {"
            u"var value = aArgs[2][0];"
            u"YAHOO.util.Dom.setAttribute(%(hidden_id)s, 'value', value);"
            u"YAHOO.util.Dom.get(%(submit_id)s).click();"
            u"});" % {
                'ac_id': self.autocomplete().var,
                'hidden_id': ajax.py2js(hidden_id),
                'submit_id': ajax.py2js(submit_id)
            }
        )
        h << h.script(
            "document.getElementById(%s).focus()" % ajax.py2js(self.text_id)
        )
        h << h.button(id=submit_id, style='display:none').action(remote.Action(lambda: comp.answer([] if not value() else [value()])))
    return h.root

def render_BoardDescription(self, h, comp, *args):
    """Render description component in edit mode"""
    text = var.Var(self.text)
    with h.form(class_='description-form'):
        txt_id, btn_id = h.generate_id(), h.generate_id()
        h << h.label(_(u'Description'), for_=txt_id)
        ta = h.textarea(text(), id_=txt_id).action(text)
        if not security.has_permissions('edit', self):
            ta(disabled='disabled')
        h << ta
        with h.div:
            if security.has_permissions('edit', self):
                h << h.button(_('Save'), class_='btn btn-primary btn-small',
                              id=btn_id).action(remote.Action(lambda: self.change_text(text())))
                h << ' '
                h << h.button(
                    _('Cancel'), class_='btn btn-small').action(remote.Action(lambda: self.change_text(None)))

        h.head.javascript(
            h.generate_id(),
            'YAHOO.kansha.app.addCtrlEnterHandler(%s, %s)' % (
                ajax.py2js(txt_id), ajax.py2js(btn_id)
            )
        )

    return h.root

def render_gallery_cropper(self, h, comp, *args):
    h << h.p(_('Use the controls below to create the cover of your card.'))

    form_id = h.generate_id()
    img_id = h.generate_id()

    with h.form:
        for crop_name in 'crop_left', 'crop_top', 'crop_width', 'crop_height':
            h << h.input(type='hidden', id=form_id + '_' + crop_name).action(getattr(self, crop_name))
        h << h.p(render_image(self.asset, h, comp, 'medium', id=img_id))
        h << h.script(
            "YAHOO.util.Event.onContentReady(%s,"
            "function(){YAHOO.kansha.app.initCrop(%s, %s, %s, %s)})" % (
                ajax.py2js(img_id),
                ajax.py2js(img_id),
                ajax.py2js(form_id),
                ajax.py2js(self.crop_width()),
                ajax.py2js(self.crop_height())
            )
        )
        with h.div(class_='buttons'):
            h << h.button(_('Create cover'), class_='btn btn-primary').action(self.commit, comp)
            if self.asset.is_cover:
                h << ' '
                h << h.button(_('Remove cover'), class_='btn delete').action(self.remove_cover, comp)
            h << ' '
            h << h.button(_('Cancel'), class_='btn').action(self.cancel, comp)
    return h.root

def py2js(value, h):
    due_date = ajax.py2js(value.due_date(), h)
    if due_date:
        return u'{title:%s, editable:true, allDay: true, start: %s}' % (
            ajax.py2js(value.get_title(), h).decode('utf-8'), due_date)
    else:
        return None

def render_board_background_edit(self, h, comp, *args):
    """Render the background configuration panel"""
    h << h.div(_(u'Background image'), class_='panel-section')
    with h.div(class_='row-fluid'):
        with h.div(class_='span6'):
            def set_background(img):
                self.board.set_background_image(img)
                self._changed(True)
            v_file = var.Var()
            submit_id = h.generate_id("attach_submit")
            input_id = h.generate_id("attach_input")
            h << h.label((h.i(class_='icon-file icon-grey'),
                          _("Choose an image")), class_='btn btn-small', for_=input_id)
            with h.form:
                h << h.script(
                    u'''
            function valueChanged(e) {
                if (YAHOO.kansha.app.checkFileSize(this, %(max_size)s)) {
                    YAHOO.util.Dom.get(%(submit_id)s).click();
                } else {
                    alert(%(error)s);
                }
            }

            YAHOO.util.Event.onDOMReady(function() {
                YAHOO.util.Event.on(%(input_id)s, 'change', valueChanged);
            });''' % {
                        'max_size': ajax.py2js(self.board.background_max_size),
                        'input_id': ajax.py2js(input_id),
                        'submit_id': ajax.py2js(submit_id),
                        'error': ajax.py2js(
                            _(u'Max file size exceeded')
                        ).decode('UTF-8')
                    }
                )
                h << h.input(id=input_id, style="position:absolute;left:-1000px;", type="file", name="file",
                             multiple="multiple", maxlength="100",).action(v_file)
                h << h.input(style="position:absolute;left:-1000px;", id=submit_id, type="submit").action(
                    lambda: set_background(v_file()))
        with h.div(class_='span5'):
            def reset_background():
                self.board.set_background_image(None)
                self._changed(True)
            h << _('or') << ' '
            h << h.a(_('Reset background')).action(reset_background)
    with h.div(class_='row-fluid'):
        with h.span(class_='span12 text-center'):
            h << component.Component(self.board, model='background_image')

    h << h.div(_(u'Board title color'), class_='panel-section')
    with h.div(class_='row-fluid'):
        with h.div(class_='span6'):
            h << comp.render(h, model='title-color-edit')
        with h.div(class_='span5'):
            def reset_color():
                self.board.set_title_color(None)
                self._changed(True)
            h << _('or') << ' '
            h << h.a(_('Reset to default color')).action(reset_color)
    return h.root

def render_card_delete(self, h, comp, model):
    if security.has_permissions('edit', self) and not self.archived:
        with h.form:
            close_func = ajax.js(
                'function (){%s;}' %
                h.a.action(self.emit_event, comp, events.CardArchived).get('onclick')
            )
            h << h.button(
                h.i(class_='icon-trashcan'),
                _('Delete'),
                class_='btn delete',
                onclick=(
                    "if (confirm(%(confirm_msg)s)) {"
                    "   YAHOO.kansha.app.archiveCard(%(close_func)s);"
                    "   reload_columns();"
                    "}"
                    "return false" %
                    {
                        'close_func': ajax.py2js(close_func),
                        'confirm_msg': ajax.py2js(
                            _(u'This card will be deleted. Are you sure?')
                        ).decode('UTF-8')
                    }
                )
            )
    return h.root

def render_CardsCounter_edit(self, h, comp, *args):
    """Render the title of the associated object"""
    text = var.Var(self.text)
    with h.div(class_='list-counter'):
        with h.div(class_='cardCounter'):
            with h.form(onsubmit='return false;'):
                action = h.input(type='submit').action(lambda: self.validate(text(), comp)).get('onclick')
                id_ = h.generate_id()
                h << h.input(id=id_, type='text', value=self.column.nb_max_cards or '', onblur=action).action(text)
                h << h.script(
                    """YAHOO.util.Event.on(%s, 'keyup', function (e) {
                            if (e.keyCode == 13) {
                                e.preventDefault();
                                this.blur();
                            }
                            var result = this.value.replace(/[^0-9]/g, '')
                            if (this.value !=result) {
                               this.value = result;
                            }
                     });""" % ajax.py2js(id_)
                )
                h << h.script(
                    "YAHOO.kansha.app.selectElement(%s);" % ajax.py2js(id_)
                )
        if self.error is not None:
            with h.div(class_='nagare-error-message'):
                h << self.error
    return h.root

def render_autocomplete(self, h, comp, *args):

    static_url = h.head.static_url

    def get_results(query):
        raise json_response(self._completion_results(query, static_url))

    h << h.script(
        'var %(var)s = YAHOO.kansha.autocomplete.init(%(field_id)s,'
        ' %(completion_url)s, %(delimiter)s, %(min_query_length)s, '
        '%(max_results_displayed)s)' %
        {
            'var': self.var,
            'field_id': ajax.py2js(self.field_id),
            'completion_url': ajax.py2js(
                h.add_sessionid_in_url(
                    params=(
                        '_a',
                        '%s=' % h.register_callback(1, get_results, False)
                    )
                )
            ),
            'delimiter': ajax.py2js(self.delimiter),
            'min_query_length': self.min_query_length,
            'max_results_displayed': self.max_results_displayed,
        }
    )

    return h.root

def render_in_calendar(self, h, comp, *args):
    # TODO should be in due_date extension
    due_date = dict(self.extensions)['due_date']().due_date
    if due_date:
        due_date = ajax.py2js(due_date, h)
        parent_title = self.emit_event(comp, events.ParentTitleNeeded) or ''
        card = u'{title:%s, editable:true, allDay: true, start: %s, _id: %s}' % (
            ajax.py2js(u'{} ({})'.format(self.data.title, parent_title), h).decode('utf-8'),
            due_date, ajax.py2js(self.id, h))
        clicked_cb = h.a.action(
            lambda: self.emit_event(comp, events.CardClicked, comp)
        ).get('onclick')

        dropped_cb = h.a.action(
            ajax.Update(
                action=self.card_dropped,
                render=lambda render: '',
                with_request=True
            )
        ).get('onclick')[:-2]

        h << h.script(u"""YAHOO.kansha.app.add_event($('#calendar'), %(card)s,
                         function() { %(clicked_cb)s},
                         function(start) { %(dropped_cb)s&start="+start);} )""" % {
            'card': card,
            'clicked_cb': clicked_cb,
            'dropped_cb': dropped_cb
        })

    return h.root

def render_comments_form(self, h, comp, *args):
    """Add a comment to the current card"""
    if security.has_permissions('comment', self):
        text = var.Var()
        with h.form:
            txt_id, buttons_id = h.generate_id(), h.generate_id()
            sub_id = h.generate_id()
            kw = {
                "id": txt_id,
                "placeholder": _("Add comment."),
                "onfocus": "YAHOO.kansha.app.show('%s', true);YAHOO.util.Dom.addClass(this, 'expanded'); " % buttons_id,
            }
            h << h.textarea(**kw).action(text)
            h.head.javascript(
                h.generate_id(),
                'YAHOO.kansha.app.addCtrlEnterHandler(%s, %s)' % (
                    ajax.py2js(txt_id), ajax.py2js(sub_id)
                )
            )
            with h.div(id=buttons_id, class_="buttons hidden"):
                h << h.input(value=_("Save"), id=sub_id, type='submit',
                             class_="btn btn-primary").action(lambda: comp.answer(text()))
                h << ' '
                h << h.input(value=_("Cancel"), type='submit',
                             class_="btn").action(lambda: comp.answer(''))

    return h.root

def render_CardsCounter_edit(self, h, comp, *args):
    """Render the title of the associated object"""
    text = var.Var(self.text)
    with h.form(class_='title-form'):
        id_ = h.generate_id()
        h << h.input(id=id_, type='text', value=self.column.nb_max_cards or '').action(text)
        h << h.script(
            """YAHOO.util.Event.on(%s, 'keyup', function (e) {
                    var result =this.value.replace(/[^0-9]/g, '')
                    if (this.value !=result) {
                           this.value = result;
                        }
             });""" % ajax.py2js(id_)
        )
        h << h.button(_('Save'), class_='btn btn-primary btn-small').action(
            lambda: self.validate(text(), comp))
        h << ' '
        h << h.button(_('Cancel'), class_='btn btn-small').action(self.cancel, comp)
        if self.error is not None:
            with h.div(class_='nagare-error-message'):
                h << self.error
        h << h.script(
            "YAHOO.kansha.app.selectElement(%s);"
            "YAHOO.kansha.app.hideOverlay()" % ajax.py2js(id_)
        )
    return h.root

def py2js(card, h):
    due_date = dict(card.extensions)['due_date']().due_date
    if not due_date:
        return None
    due_date = ajax.py2js(due_date, h)

    return u'{title:%s, editable:true, allDay: true, start: %s}' % (
            ajax.py2js(card.get_title(), h).decode('utf-8'), due_date)

def render_Board_menu(self, h, comp, *args):
    with h.div(class_='navbar', id='boardNavbar'):
        with h.div(class_='navActions', id='boardActions'):
            h << h.a(self.icons['preferences']).action(
                lambda: self.popin.call(
                    popin.Popin(
                        component.Component(
                            BoardConfig(self)
                        ),
                        "edit"
                    )
                )
            )

            if security.has_permissions('edit', self):
                h << self.add_list_overlay
                h << self.edit_description_overlay

            h << h.a(self.icons['export']).action(self.export)

            h << h.a(self.icons['history']).action(
                lambda: self.popin.call(
                    popin.Popin(
                        component.Component(
                            notifications.ActionLog(self)
                        ),
                        'history'
                    )
                )
            )

            if security.has_permissions('manage', self):
                h << h.a(
                    self.icons['archive'],
                    onclick=(
                        'return confirm(%s)' %
                        ajax.py2js(
                            _("This board will be archived. Are you sure?")
                        ).decode('UTF-8')
                    )
                ).action(self.archive_board)
            else:
                h << h.a(
                    self.icons['leave'],
                    onclick=(
                        "return confirm(%s)" %
                        ajax.py2js(
                            _("You won't be able to access this board anymore. Are you sure you want to leave it anyway?")
                        ).decode('UTF-8')
                    )
                ).action(self.leave)

        kw = {'onclick': "YAHOO.kansha.app.toggleMenu('boardNavbar')"}
        with h.div(class_="tab collapse", **kw):
            h << h.a('Board', title='Board', id="boardTab")
    return h.root

def render_column_dropdown(self, h, comp, *args):
    """Render the column menu"""
    with h.div(class_="dropdown menu"):
        with h.ul:
            if not self.is_archive:
                with h.li:
                    onclick = (
                        u"if (confirm(%(message)s)){"
                        u" window.location='%(callback)s';"
                        u"}" %
                        {
                            'message': ajax.py2js(
                                _(u'The list will be deleted. Are you sure?')
                            ).decode('UTF-8'),
                            'callback': h.SyncRenderer().a.action(
                                self.actions, 'delete', comp
                            ).get('href')
                        }
                    )
                    h << h.a(_(u'Delete this list'), onclick=onclick)
                if self.cards:
                    with h.li:
                        onclick = (
                            u"if (confirm(%(message)s)){"
                            u" window.location='%(callback)s';"
                            u"}" %
                            {
                                'message': ajax.py2js(
                                    _(u'All the cards will be archived. Are you sure?')
                                ).decode('UTF-8'),
                                'callback': h.SyncRenderer().a.action(
                                    self.actions, 'empty', comp
                                ).get('href')
                            }
                        )
                        h << h.a(_(u'Empty this list'), onclick=onclick)
                h << self.card_counter.render(h, 'menu-entry')
            elif self.cards:
                with h.li:
                    onclick = "if (confirm(%(message)s)){window.location='%(purge_func)s';}" % {
                        'message': ajax.py2js(
                            _(u'All cards will be deleted. Are you sure?')
                        ).decode('UTF-8'),
                        'purge_func': h.SyncRenderer().a.action(
                            self.actions, 'purge', comp
                        ).get('href')
                    }
                    h << h.a(_('Purge the cards'), onclick=onclick)

    return h.root

def render_CardsCounter(self, h, comp, *args):
    with h.div(class_='list-counter'):
        self.error = None
        with h.div(class_='cardCounter', id=self.id):
            h << {'style': 'cursor: default'}
            h << h.span(self.text)
    h << h.script(
        "YAHOO.kansha.app.saveLimit(%(list_id)s, %(limit)s);"
        "YAHOO.kansha.app.countCards(%(list_id)s);" %
        {
            'list_id': ajax.py2js(self.column.id),
            'limit': ajax.py2js(self.column.nb_max_cards or 0)
        }
    )
    return h.root

def render_NewMember(self, h, comp, *args):
    """Render the title of the associated card"""
    with h.form:
        members_to_add = var.Var()

        def get_emails():
            emails = []
            for email in members_to_add().split(','):
                try:
                    email = email.strip()
                    email = validator.validate_email(email)
                    emails.append(email)
                except ValueError:
                    continue
            return emails

        h << h.input(type='text', id=self.text_id,).action(members_to_add)
        mail_input = h.input(value=_("Add"), type="submit",
                             class_="btn btn-primary"
                            ).action(remote.Action(lambda: comp.answer(get_emails())))
        # Sending mail synchronously can take a long time
        mail_input.set('onclick', 'YAHOO.kansha.app.showWaiter();' + mail_input.get('onclick'))
        h << mail_input
        h << self.autocomplete
    h << h.script(
        "document.getElementById(%s).focus()" % ajax.py2js(self.text_id)
    )
    return h.root

def render_column_body(self, h, comp, *args):
    model = 'dnd' if security.has_permissions('edit', self) else "no_dnd"
    id_ = h.generate_id()
    with h.div(class_='list-body', id=id_):
        h << [card.on_answer(self.edit_card).render(h, model=model) for card in self.cards]
        h << h.script("YAHOO.kansha.dnd.initTargetCard(%s)" % ajax.py2js(id_))
    kw = {}
    if not security.has_permissions('edit', self):
        kw['style'] = 'width: 0px'
    if not self.is_archive:
        with h.div(class_='list-footer', id=self.id + '_footer', **kw):
            if security.has_permissions('edit', self):
                h << h.div(self.new_card)

    h << h.script("YAHOO.kansha.app.countCards(%s)" % ajax.py2js(self.id))
    return h.root

def render(self, h, *args):
    h.head.css('nagare_chat', '''
               #msgs {
                        list-style-type: none;
                        border: 1px dashed #f3f2f1;
                        padding: 5px;
               }
               #msgs li:nth-child(odd) { background-color: #f3f2f1; }
               .msg_type_j { color: red }
               .msg_type_p { color: blue }

               ''')

    # Inclusion of the translated ``append_msg`` function
    h.head << h.head.script(ajax.py2js(append_msg, h))

    with h.div:
        # Automatic inclusion of the javascript Comet functions
        h << component.Component(comet.channels[self.channel_id])

        # Asynchronous (Ajax) rendering of the user interaction form
        h << self.interaction.render(h.AsyncRenderer())

        # This list will be filled by the received messages
        h << h.ul(id='msgs')

    return h.root

def render_NewMember(self, h, comp, *args):
    """Render the title of the associated card"""
    with h.form:
        members_to_add = var.Var()

        def get_emails():
            emails = []
            for email in members_to_add().split(','):
                try:
                    email = email.strip()
                    email = validators.validate_email(email)
                    emails.append(email)
                except ValueError:
                    continue
            return emails

        h << h.input(type='text', id=self.text_id,).action(members_to_add)
        h << h.input(value=_("Add"), type="submit",
                     class_="btn btn-primary btn-small"
                     ).action(remote.Action(lambda: comp.answer(get_emails())))
        h << self.autocomplete
    h << h.script(
        "document.getElementById(%s).focus()" % ajax.py2js(self.text_id)
    )
    return h.root

def render_userboards(self, h, comp, *args):
    h.head << h.head.title(self.app_title)

    with h.ul(class_="unstyled board-labels"):
        h << [b.on_answer(comp.answer).render(h, "item") for b in self.boards]

    with h.div:
        h << self.new_board.on_answer(comp.answer)

    if len(self.archived_boards):
        with h.div:
            h << h.h2(_('Archived Boards'))

            with h.ul(class_="unstyled board-labels"):
                h << [b.render(h, "archived_item")
                      for b in self.archived_boards]

            h << h.a(
                _("Delete"),
                class_="btn btn-primary btn-small",
                onclick='return confirm(%s)' % ajax.py2js(
                    _("These boards will be destroyed. Are you sure?")
                ).decode('UTF-8'),
                type='submit'
            ).action(self.purge_archived_boards)
    return h.root