app/views/templates/templates.html.haml
%p.template-label.heading
Child elements of .container
%em (width: 960px)
%p.template-label Lead paragraph
.container
%p.lead Use this online form to start the process of repossessing a property if your tenant doesn’t pay their rent, breaks the tenancy agreement or refuses to move out.
%p.template-label.closed /Lead paragraph
%p.template-label Progress nav
%p.template-label-sub With <span>s
.container
%nav.progress
%ol
%li.active
%span Personal details
%li
%span Case details
%li
%span Confirm details
%li
%span Pay court fee
%li
%span Confirmation
%p.template-label-sub With <a>s
.container
%nav.progress
%ol
%li.active
%a(href='#') Personal details
%li
%a(href='#') Case details
%li
%a(href='#') Confirm details
%li
%a(href='#') Pay court fee
%li
%a(href='#') Confirmation
%p.template-label-sub With completed steps
.container
%nav.progress
%ol
%li.completed
%a(href='#') Personal details
%li.completed
%a(href='#') Case details
%li.active
%a(href='#') Confirm details
%li
%a(href='#') Pay court fee
%li
%a(href='#') Confirmation
%p.template-label-sub On last step
.container
%nav.progress
%ol
%li.completed
%a(href='#') Personal details
%li.completed
%a(href='#') Case details
%li.completed
%a(href='#') Confirm details
%li.completed
%a(href='#') Pay court fee
%li.active
%a(href='#') Confirmation
%p.template-label-sub Mixed – <a>s for completed steps and <span>s for uncompleted steps
.container
%nav.progress
%ol
%li.completed
%a(href='#') Personal details
%li.completed
%a(href='#') Case details
%li.active
%span Confirm details
%li
%span Pay court fee
%li
%span Confirmation
%p.template-label.closed /Progress nav
%p.template-label.heading
Child elements of <section> and equivalents
%em (width: 850px)
%p.template-label Page intro (does not go inside <section>)
%header.content-header
%h2 Step 1 - Personal details
%p Fill in the address of the property you want to repossess and contact details for the landlords and tenants.
%p.template-label.closed /Page intro
%p.template-label Form panels
%p.template-label-sub Property details panel
%section.property-details
%h3.section-header Property details
.moj-panel
%form
.row
%label(for='postcode')> Postcode
%input.has-button.smalltext#postcode(type='text' name='postcode')>
%a.button.primary> Find UK address
.row.rel.help-link
%a(href='#') Enter address manually
%fieldset.striped-choice
%legend Type of property
.options
.row
%input#property-residential(type='checkbox')
%label(for='property-residential') Residential
.row
%input#property-commercial(type='checkbox')
%label(for='property-commercial') Commercial
%fieldset.striped-choice
%legend Who is in the property?
.options
.row
%input#property-who-tenants(type='radio' name='property-who')
%label(for='property-who-tenants') Tenants
.row
%input#property-who-squatters(type='radio' name='property-who')
%label(for='property-who-squatters') Squatters
.row.full
%details
%summary Would you like to provide a title number?
.row
%label(for='title-number') Title number
%input.smalltext#title-number(type='text' name='title-number')
.row.rel.help-link
%a(href='#') About title numbers
%p.template-label-sub Landlord details panel
%section.landlord-details
%h3.section-header Landlord details
.moj-panel
%form
.row
%label(for='landlord-numlandlords')> Number of landlords
%select.small#landlord-numlandlords(name='landlord-numlandlords')
%option(value='1') 1
%option(value='2') 2
%option(value='3') 3
%option(value='4') 4
%option(value='5') 5
%option(value='6') 6
%option(value='7') 7
%option(value='8') 8
%option(value='9') 9
%option(value='10') 10
.row.divider
.row
%label(for='landlord-title')> Title
%select.small#landlord-title(name='landlord-title')
%option(value='') select
%option(value='Mr' selected='selected') Mr
%option(value='Mrs') Mrs
%option(value='Miss') Miss
%option(value='Ms') Ms
%option(value='Dr') Dr
%option(value='Other') Other
.row.rel
%label(for='landlord-fullname')> Full name
%input#landlord-fullname(type='text' name='landlord-fullname' value='John Smith Reynolds')
.row.rel.street
%label(for='landlord-address')> Street
%textarea#landlord-address(name='landlord-address')
121 Elm Park Road
.row.rel.town
%label(for='landlord-town')> Town
%input#landlord-town(type='text' name='landlord-town' value='London')
.row.rel.postcode
%label(for='landlord-postcode')> Postcode
%input.has-button.smalltext#landlord-postcode(type='text' name='landlord-postcode')>
%a.button.primary> Find UK address
.row.rel
%label(for='landlord-phone')> Phone
%input#landlord-phone(type='text' name='landlord-phone' value='020 7613 4431')
.row.rel
%label(for='landlord-mobile')> Mobile
%input#landlord-mobile(type='text' name='landlord-mobile' value='07792 685998')
.row.rel
%label(for='landlord-email')> Email
%input#landlord-email(type='text' name='landlord-email' value='jsreynolds@btconnect.com')
.row.rel.full
%details
%summary I would like to provide a DX number
.row
%label(for='landlord-dxnumber') DX number
%input#landlord-dxnumber(type='text' name='landlord-dxnumber')
.row.rel
%label(for='landlord-dxexchange') DX exchange
%input#landlord-dxexchange(type='text' name='landlord-dxexchange')
%p.template-label-sub Tenant details panel
%section.tenant-details
%h3.section-header Tenant details
.moj-panel
%form
.row
%label(for='tenant-numtenants') Number of tenants
%select.small#tenant-numtenants(name='tenant-numtenants')
%option(value='1') 1
%option(value='2') 2
%option(value='3') 3
%option(value='4') 4
%option(value='5') 5
%option(value='6') 6
%option(value='7') 7
%option(value='8') 8
%option(value='9') 9
%option(value='10') 10
.row.divider
.row
%label(for='tenant-title') Title
%select.small#tenant-title(name='tenant-title')
%option(value='') select
%option(value='Mr') Mr
%option(value='Mrs') Mrs
%option(value='Miss') Miss
%option(value='Ms') Ms
%option(value='Dr') Dr
%option(value='Other') Other
.row.rel
%label(for='tenant-fullname') Full name
%input#tenant-fullname(type='text' name='tenant-fullname' placeholder='e.g. John Smith')
%fieldset.striped-choice.rel
%legend Address
.options
.row
%input#tenant-location-inproperty(type='radio' name='tenant-location')
%label(for='tenant-location-inproperty') They are living in the property
.row
%input#tenant-location-elsewhere(type='radio' name='tenant-location')
%label(for='tenant-location-elsewhere') They are at another known address
.row
%input#tenant-location-unknown(type='radio' name='tenant-location')
%label(for='tenant-location-unknown') I don't know where they are
.row.rel
%label(for='tenant-phone') Phone
%input#tenant-phone(type='text' name='tenant-phone')
.row.rel
%label(for='tenant-mobile') Mobile
%input#tenant-mobile(type='text' name='tenant-mobile')
.row.rel
%label(for='tenant-email') Email
%input#tenant-email(type='text' name='tenant-email')
%p.template-label-sub About the tenancy panel
%section.about-tenancy
%h3.section-header About the tenancy
.moj-panel
%form
%fieldset.striped-choice
%legend Tenancy type
.options
.row
%input#tenancytype-shorthold(type='radio' name='tenancytype' checked='checked')
%label(for='tenancytype-shorthold') Assured shorthold tenancy
.row
%input#tenancytype-assured(type='radio' name='tenancytype')
%label(for='tenancytype-assured') Assured tenancy
.row
%input#tenancytype-regulated(type='radio' name='tenancytype')
%label(for='tenancytype-regulated') Regulated tenancy
.row.rel.help-link
%a(href='#') About tenancy types
%fieldset.date-picker
%legend Tenancy start date
.row
%select#tenancystart-date.date-date
%option(value='') date
%option(value='1') 1
%option(value='2') 2
%option(value='3') 3
%option(value='4') 4
%option(value='5') 5
%option(value='6') 6
%option(value='7') 7
%option(value='8') 8
%option(value='9') 9
%option(value='10') 10
%option(value='11') 11
%option(value='12') 12
%option(value='13') 13
%option(value='14') 14
%option(value='15') 15
%option(value='16') 16
%option(value='17') 17
%option(value='18') 18
%option(value='19') 19
%option(value='20') 20
%option(value='21') 21
%option(value='22') 22
%option(value='23') 23
%option(value='24') 24
%option(value='25') 25
%option(value='26') 26
%option(value='27') 27
%option(value='28') 28
%option(value='29') 29
%option(value='30') 30
%option(value='31') 31
%select#tenancystart-month.date-month
%option(value='') month
%option(value='January') January
%option(value='February') February
%option(value='March') March
%option(value='April') April
%option(value='May') May
%option(value='June') June
%option(value='July') July
%option(value='August') August
%option(value='September') September
%option(value='October') October
%option(value='November') November
%option(value='December') December
%select#tenancystart-year.date-year
%option(value='') year
%option(value='2013') 2013
%option(value='2012') 2012
%option(value='2011') 2011
%option(value='2010') 2010
%option(value='2009') 2009
%option(value='2008') 2008
%option(value='2007') 2007
%option(value='2006') 2006
%option(value='2005') 2005
%option(value='2004') 2004
%option(value='2003') 2003
%option(value='2002') 2002
%option(value='2001') 2001
%option(value='2000') 2000
%option(value='1999') 1999
%option(value='1998') 1998
%option(value='1997') 1997
%option(value='1996') 1996
%option(value='1995') 1995
%option(value='1994') 1994
%option(value='1993') 1993
%option(value='1992') 1992
%option(value='1991') 1991
%option(value='1990') 1990
.row
%a.button.primary(href='#') Attach tenancy agreement files
%p.template-label-sub Additional information panel
%section.additional-information
%h3.section-header Additional information
.moj-panel
%form
.row.full
%label(for='additional-info') Please give details if there is any other information which relates to the case that you would like the court to know
%textarea#additional-info(name='additional-info')
.row.rel.full
%input#human-rights(type='checkbox' name='human-rights')
%label(for='human-rights') The case includes issues under the Human Rights Act 1998
.row.divider
.row.full
%p Attach files that support your case.
%p
%a(href='#') About attaching files
.row.rel.full
%a.button.primary(href='#') Attach files
%p.template-label-sub About the case panel
%section.about-case
%h3.section-header About the case
.moj-panel
%form
%fieldset.striped-choice
%legend Your reasons for repossession
.options
.row
%input#casereasons-unpaidrent(type='checkbox')
%label(for='casereasons-unpaidrent') Unpaid rent
.row
%input#casereasons-antisocial(type='checkbox')
%label(for='casereasons-antisocial') Anti-social behaviour
.row
%input#casereasons-misuse(type='checkbox')
%label(for='casereasons-misuse') Misuse of property
.has-extra
.row
%input#casereasons-other(type='checkbox')
%label(for='casereasons-other') Other breach of tenancy
.extra
%label(for='casereasons-other-detail') Please give details
%textarea#casereasons-other-detail(name='casereasons-other-detail')
.row.rel.help-link
%a(href='#') About reasons for repossession
%fieldset.striped-choice
%legend Did you send the tenants a notice?
.options
.row
%input#tenant-notice-yes(type='radio' name='tenant-notice')
%label(for='tenant-notice-yes') Yes
.row
%input#tenant-notice-no(type='radio' name='tenant-notice')
%label(for='tenant-notice-no') No
.row.rel.help-link
%a(href='#') About notices
%p.template-label-sub Did you send a notice - Notice to quit sent with date picker
%section.about-case
.moj-panel
%form
%fieldset.striped-choice
%legend Did you send the tenants a notice?
.options
.row
%input#tenant-notice2-yes(type='radio' name='tenant-notice2' checked='checked')
%label(for='tenant-notice2-yes') Yes
.row
%input#tenant-notice2-no(type='radio' name='tenant-notice2')
%label(for='tenant-notice2-no') No
.row.rel.help-link
%a(href='#') About notices
%fieldset.striped-choice
%legend Notices sent
.options
.has-extra
.row
%input#noticessent-noticetoquit(type='checkbox' checked='checked')
%label(for='noticessent-noticetoquit') Notice to quit
.extra
%fieldset.date-picker
%legend Date notice sent
.row
%select#noticesent-date.date-date
%option(value='') date
%option(value='1') 1
%option(value='2') 2
%option(value='3') 3
%option(value='4') 4
%option(value='5') 5
%option(value='6') 6
%option(value='7') 7
%option(value='8') 8
%option(value='9') 9
%option(value='10') 10
%option(value='11') 11
%option(value='12') 12
%option(value='13') 13
%option(value='14') 14
%option(value='15') 15
%option(value='16') 16
%option(value='17') 17
%option(value='18') 18
%option(value='19') 19
%option(value='20') 20
%option(value='21') 21
%option(value='22') 22
%option(value='23') 23
%option(value='24') 24
%option(value='25') 25
%option(value='26') 26
%option(value='27') 27
%option(value='28') 28
%option(value='29') 29
%option(value='30') 30
%option(value='31') 31
%select#noticesent-month.date-month
%option(value='') month
%option(value='January') January
%option(value='February') February
%option(value='March') March
%option(value='April') April
%option(value='May') May
%option(value='June') June
%option(value='July') July
%option(value='August') August
%option(value='September') September
%option(value='October') October
%option(value='November') November
%option(value='December') December
%select#noticesent-year.date-year
%option(value='') year
%option(value='2013') 2013
%option(value='2012') 2012
%option(value='2011') 2011
%option(value='2010') 2010
%option(value='2009') 2009
%option(value='2008') 2008
%option(value='2007') 2007
%option(value='2006') 2006
%option(value='2005') 2005
%option(value='2004') 2004
%option(value='2003') 2003
%option(value='2002') 2002
%option(value='2001') 2001
%option(value='2000') 2000
%option(value='1999') 1999
%option(value='1998') 1998
%option(value='1997') 1997
%option(value='1996') 1996
%option(value='1995') 1995
%option(value='1994') 1994
%option(value='1993') 1993
%option(value='1992') 1992
%option(value='1991') 1991
%option(value='1990') 1990
.row
%a.button.primary(href='#') Attach notice to quit files
.row.divider
.row.files
%ul
%li
Noticetoquit.pdf
%a.x(href='#') ×
.row
%input#noticessent-breach(type='checkbox')
%label(for='noticessent-breach') Breach of lease
.row
%input#noticessent-seekingpossession(type='checkbox')
%label(for='noticessent-seekingpossession') Seeking possession
.row
%input#noticessent-other(type='checkbox')
%label(for='noticessent-other') Other recovery steps taken
%p.template-label-sub Did you send a notice - warning on selecting 'no'
%section.about-case
.moj-panel
%form
%fieldset.striped-choice
%legend Did you send the tenants a notice?
.options
.row
%input#tenant-notice3-yes(type='radio' name='tenant-notice3')
%label(for='tenant-notice3-yes') Yes
.row
%input#tenant-notice3-no(type='radio' name='tenant-notice3' checked='checked')
%label(for='tenant-notice3-no') No
.row.rel.help-link
%a(href='#') About notices
.row.full.warning
%p.nomargin
You will not be able to continue to submit a repossession case until you have correctly sent the tenants a notice.
%a(href='#')
About sending the tenants a notice
%p.template-label-sub Unpaid rent panel
%section.unpaid-rent
%h3.section-header Unpaid rent
.moj-panel
%form
.row
%label(for='unpaidrent-amount') Rent amount
%input.pound#unpaidrent-amount(type='text' name='unpaidrent-amount')
%fieldset.striped-choice
%legend Rent frequency
.options
.row
%input#unpaidrent-rentfrequency-monthly(type='radio' name='unpaidrent-rentfrequency' checked='checked')
%label(for='unpaidrent-rentfrequency-monthly') Monthly
.row
%input#unpaidrent-rentfrequency-fortnightly(type='radio' name='unpaidrent-rentfrequency')
%label(for='unpaidrent-rentfrequency-fortnightly') Fortnightly
.row
%input#unpaidrent-rentfrequency-weekly(type='radio' name='unpaidrent-rentfrequency')
%label(for='unpaidrent-rentfrequency-weekly') Weekly
.row
%label(for='unpaidrent-dailyamount') Daily rent amount
%input.pound#unpaidrent-dailyamount(type='text' name='unpaidrent-dailyamount')
.row.rel.help-link
%a(href='#') About daily rent
%fieldset.striped-choice
%legend I would like to
.options
.row
%input#unpaidrentdetails-attach(type='radio' name='unpaidrentdetails')
%label(for='unpaidrentdetails-attach') Attach files which list all unpaid rent
.row
%input#unpaidrentdetails-manually(type='radio' name='unpaidrentdetails')
%label(for='unpaidrentdetails-manually') Manually enter the figures into this form
%p.template-label-sub Unpaid rent table - appears when user chooses to enter figures manually
%section.rent-table
.moj-panel
%form
%fieldset.date-picker
%legend Tenancy start date
.row
%select#unpaidrentdue-date.date-date
%option(value='') date
%option(value='1') 1
%option(value='2') 2
%option(value='3') 3
%option(value='4') 4
%option(value='5') 5
%option(value='6') 6
%option(value='7') 7
%option(value='8') 8
%option(value='9') 9
%option(value='10') 10
%option(value='11') 11
%option(value='12') 12
%option(value='13') 13
%option(value='14') 14
%option(value='15') 15
%option(value='16') 16
%option(value='17') 17
%option(value='18') 18
%option(value='19') 19
%option(value='20') 20
%option(value='21') 21
%option(value='22') 22
%option(value='23') 23
%option(value='24') 24
%option(value='25') 25
%option(value='26') 26
%option(value='27') 27
%option(value='28') 28
%option(value='29') 29
%option(value='30') 30
%option(value='31') 31
%select#unpaidrentdue-month.date-month
%option(value='') month
%option(value='January') January
%option(value='February') February
%option(value='March') March
%option(value='April') April
%option(value='May') May
%option(value='June') June
%option(value='July') July
%option(value='August') August
%option(value='September') September
%option(value='October') October
%option(value='November') November
%option(value='December') December
%select#unpaidrentdue-year.date-year
%option(value='') year
%option(value='2013') 2013
%option(value='2012') 2012
%option(value='2011') 2011
%option(value='2010') 2010
%option(value='2009') 2009
%option(value='2008') 2008
%option(value='2007') 2007
%option(value='2006') 2006
%option(value='2005') 2005
%option(value='2004') 2004
%option(value='2003') 2003
%option(value='2002') 2002
%option(value='2001') 2001
%option(value='2000') 2000
%option(value='1999') 1999
%option(value='1998') 1998
%option(value='1997') 1997
%option(value='1996') 1996
%option(value='1995') 1995
%option(value='1994') 1994
%option(value='1993') 1993
%option(value='1992') 1992
%option(value='1991') 1991
%option(value='1990') 1990
%fieldset.rel.striped-choice
.options
.has-extra
.row
%input#unpaidrent-partpaid(type='checkbox')
%label(for='unpaidrent-partpaid') The tenant paid part of the rent for this period
.extra
%label(for='unpaidrent-partpaid-detail') The tenant paid
%input.pound#unpaidrent-partpaid-detail(type='text' name='unpaidrent-partpaid-detail')
.row.rel
%a.button.primary(href='#') Add unpaid rent to table
.row.divider
.row.full.table
%table.unpaid-rent-table.js-scrolltable
%thead
%tr
%th.remove.blank
%th.date Rent due on
%th.amount Rental amount
%th.paid Amount paid
%th.unpaid Unpaid rent
%tbody
%tr
%td.remove
%a.x(href='#') ×
%td.date 10 Apr 2013
%td £950
%td £0
%td.unpaid £950
%tr
%td.remove
%a.x(href='#') ×
%td.date 10 May 2013
%td £950
%td £0
%td.unpaid £950
%tr
%td.remove
%a.x(href='#') ×
%td.date 10 Jun 2013
%td £950
%td £0
%td.unpaid £950
%tfoot
%tr
%td.blank
%td(colspan='3') Total
%td.unpaid £2850
%p.template-label-sub Unpaid rent table with enough rows to trigger scrolling (jQuery plugin)
%section.rent-table
.moj-panel
.row.full.table
%table.unpaid-rent-table.js-scrolltable
%thead
%tr
%th.remove.blank
%th.date Rent due on
%th.amount Rental amount
%th.paid Amount paid
%th.unpaid Unpaid rent
%tbody
%tr
%td.remove
%a.x(href='#') ×
%td.date 10 Apr 2012
%td £950
%td £0
%td.unpaid £950
%tr
%td.remove
%a.x(href='#') ×
%td.date 10 May 2012
%td £950
%td £0
%td.unpaid £950
%tr
%td.remove
%a.x(href='#') ×
%td.date 10 Jun 2012
%td £950
%td £0
%td.unpaid £950
%tr
%td.remove
%a.x(href='#') ×
%td.date 10 Jul 2012
%td £950
%td £0
%td.unpaid £950
%tr
%td.remove
%a.x(href='#') ×
%td.date 10 Aug 2012
%td £950
%td £0
%td.unpaid £950
%tr
%td.remove
%a.x(href='#') ×
%td.date 10 Sep 2012
%td £950
%td £0
%td.unpaid £950
%tr
%td.remove
%a.x(href='#') ×
%td.date 10 Oct 2012
%td £950
%td £0
%td.unpaid £950
%tr
%td.remove
%a.x(href='#') ×
%td.date 10 Nov 2012
%td £950
%td £0
%td.unpaid £950
%tr
%td.remove
%a.x(href='#') ×
%td.date 10 Dec 2012
%td £950
%td £0
%td.unpaid £950
%tr
%td.remove
%a.x(href='#') ×
%td.date 10 Jan 2013
%td £950
%td £0
%td.unpaid £950
%tr
%td.remove
%a.x(href='#') ×
%td.date 10 Feb 2013
%td £950
%td £0
%td.unpaid £950
%tr
%td.remove
%a.x(href='#') ×
%td.date 10 Mar 2013
%td £950
%td £0
%td.unpaid £950
%tr
%td.remove
%a.x(href='#') ×
%td.date 10 Apr 2013
%td £950
%td £0
%td.unpaid £950
%tr
%td.remove
%a.x(href='#') ×
%td.date 10 May 2013
%td £950
%td £0
%td.unpaid £950
%tr
%td.remove
%a.x(href='#') ×
%td.date 10 Jun 2013
%td £950
%td £0
%td.unpaid £950
%tfoot
%tr
%td.blank
%td(colspan='3') Total
%td.unpaid £10450
%p.template-label-sub Adding unpaid rent files panel
%section.rent-files
.moj-panel
%fieldset.striped-choice
%legend I would like to
.options
.row
%input#unpaidrentfiles-attach(type='radio' name='unpaidrentfiles' checked='checked')
%label(for='unpaidrentfiles-attach') Attach files which list all unpaid rent
.row
%input#unpaidrentfiles-manually(type='radio' name='unpaidrentfiles')
%label(for='unpaidrentfiles-manually') Manually enter the figures into this form
.row
%label(for='unpaidrentfiles-total') Total unpaid rent
%input.pound#unpaidrentfiles-total(type='text' name='unpaidrentfiles-total')
.row
%a.button.primary(href='#') Attach unpaid rent files
.row.divider
.row.full.files
%ul
%li
Rentdue-Apr2013.xls
%a.x(href='#') ×
%li
Rentdue-May2013.xls
%a.x(href='#') ×
%li
Rentdue-Jun2013.xls
%a.x(href='#') ×
%p.template-label-sub Confirm details panel
%section
%h3.section-header
Confirm details
.moj-panel
%form
.row.full
%input#confirm-details(type='checkbox' name='confirm-details')
%label(for='confirm-details') I believe that the facts stated in this case (and any attached documents) are to the best of my knowledge true and correct.
.row.rel.full.warning
A person who confirms these details without an honest belief in the truth of the given information is liable to proceedings for contempt of court.
%p.template-label.closed /Form panels
%p.template-label Form action buttons
%section
.action-buttons.cf
%a.button.primary.large.chevron.left(href='#') Continue to next step
%a.button.secondary.large.right(href='#') Save and close
%p.template-label.closed /Form action buttons
%p.template-label Form entry review panels (confirm details page)
%p.template-label-sub Property details review panel
%section.review
%h3.section-header
Property details
%a.right(href='#') Make changes
.moj-panel
.row
.key
Address
.value
Flat 3
%br/
92 Crystal Palace Park Road
%br/
London
%br/
SE26 6UP
.row
.key
Type of property
.value
Residential
.row
.key
Who is in the property?
.value
Tenants
%p.template-label-sub About the case review panel
%section.review
%h3.section-header
About the case
%a.right(href='#') Make changes
.moj-panel
.row
.key
Your reasons for repossession
.value
Unpaid rent
.row
.key
Notice sent
.value
Notice to quit
%br/
Sent 10 September 2013
.files
%ul
%li
Rentdue-Apr2013.xls
%a(href='#') View
%p.template-label-sub Unpaid rent (table) review panel
%section.review
%h3.section-header
Unpaid rent (table)
%a.right(href='#') Make changes
.moj-panel
.row
.key
Rent amount
.value
£950 per month
.row
.key
Daily rent amount
.value
£32 per day
.row.divider
.row.full
%table.unpaid-rent-table.js-scrolltable
%thead
%tr
%th.date Rent due on
%th.amount Rental amount
%th.paid Amount paid
%th.unpaid Unpaid rent
%tbody
%tr
%td.date 10 Apr 2013
%td £950
%td £0
%td.unpaid £950
%tr
%td.date 10 May 2013
%td £950
%td £0
%td.unpaid £950
%tr
%td.date 10 Jun 2013
%td £950
%td £0
%td.unpaid £950
%tfoot
%tr
%td(colspan='3') Total
%td.unpaid £2850
%p.template-label-sub Unpaid rent (files) review panel
%section.review
%h3.section-header
Unpaid rent (files)
%a.right(href='#') Make changes
.moj-panel
.row
.key
Rent amount
.value
£950 per month
.row
.key
Daily rent amount
.value
£32 per day
.row.divider
.row.full
.key
Attached files
.value.files
%ul
%li
Rentdue-Apr2013.xls
%a(href='#') View
%li
Rentdue-May2013.xls
%a(href='#') View
%li
Rentdue-Jun2013.xls
%a(href='#') View
%p.template-label-sub Additional information review panel
%section.review
%h3.section-header
Additional information
%a.right(href='#') Make changes
.moj-panel
.row.full
.key
Other information
.value.highlight
Lobortis augue sed tincidunt. Quisque posuere, est eget luctus interdum, nulla augue iaculis metus.
.row.full
.key
Attached files
.value.files
%ul
%li
Tenancyagreement.pdf
%a(href='#') View
%li
Letter_from_Lambeth_Council.doc
%a(href='#') View
%li
LettertoDefendant.doc
%a(href='#') View
%p.template-label.closed /Form entry review panels (confirm details page)
%p.template-label Information panels (pay court fee page)
%p.template-label-sub Provisional hearing panel
%section
%h3.section-header
Provisional hearing
.moj-panel.important
.row
.key
Hearing date
.value
Wednesday 21 August 2013 at 10:30
.row
.key
Court
.value
Lambeth County Court
%p.template-label-sub Payment details panel (with credit card extra fields shown)
%section
%h3.section-header
Payment details
.moj-panel
%form
.row
.key
Court fee
.value
£100
%fieldset.striped-choice
%legend I want to pay with
.options
.row
%input#payment-method-cc(type='radio' name='payment-method' checked='checked')
%label(for='payment-method-cc') A credit or debit card
.row
%input#payment-method-paypal(type='radio' name='payment-method')
%label(for='payment-method-paypal') Paypal
.row
%input#payment-method-worldpay(type='radio' name='payment-method')
%label(for='payment-method-worldpay') Worldpay
/ these fields only appear once credit card option is chosen
.row
%label(for='card-number')> Card number
%input#card-number(type='text' name='card-number')
%fieldset.rel.date-picker
%legend Expiry date
.row
%select#cardexpiry-month.date-month
%option(value='') month
%option(value='January') January
%option(value='February') February
%option(value='March') March
%option(value='April') April
%option(value='May') May
%option(value='June') June
%option(value='July') July
%option(value='August') August
%option(value='September') September
%option(value='October') October
%option(value='November') November
%option(value='December') December
%select#cardexpiry-year.date-year
%option(value='') year
%option(value='2013') 2013
%option(value='2012') 2012
%option(value='2011') 2011
%option(value='2010') 2010
%option(value='2009') 2009
%option(value='2008') 2008
%option(value='2007') 2007
%option(value='2006') 2006
%option(value='2005') 2005
%option(value='2004') 2004
%option(value='2003') 2003
%option(value='2002') 2002
%option(value='2001') 2001
%option(value='2000') 2000
%option(value='1999') 1999
%option(value='1998') 1998
%option(value='1997') 1997
%option(value='1996') 1996
%option(value='1995') 1995
%option(value='1994') 1994
%option(value='1993') 1993
%option(value='1992') 1992
%option(value='1991') 1991
%option(value='1990') 1990
%a.inline-help(href='#') What's this
.row.rel
%label(for='card-securitycode')> Security code (cvc)
%input#card-securitycode(type='text' name='card-securitycode')
.row.rel
%label(for='card-name')> Cardholder's name
%input#card-name(type='text' name='card-name')
%p.template-label-sub Agree to terms panel
%section
%h3.section-header
Agree to terms
.moj-panel
.row.full
%input#agree-terms(type='checkbox' name='agree-terms')
%label(for='agree-terms') I agree to the terms and conditions of this service.
.row.rel.full.information
We will never share any of the data or details you have provided in this form with anyone. See full details on our #{link_to 'privacy policy', '#'} and #{link_to 'terms and conditions', '#'}.
%p.template-label.closed /Information panels (pay court fee page)
%p.template-label Confirmation panels (confirmation page)
%p.template-label-sub Confirmation intro - used in place of usual page intro on confirmation page
%section.confirmation-intro
%h1 Your case has been submitted
%p We've sent you an email with all the details of your case.
%p You can track the status at any time in #{link_to 'your cases', '#'}.
%h2
Case number:
%strong 2D9KUVVE
%p.template-label-sub Receipt panel
%section.review
%h3.section-header
Receipt
%a.right(href='#') Print receipt
.moj-panel
.row
.key
Court fee
.value
£100
.row
.key
Payment method
.value
VISA **** **** 1234
.row
.key
Payment date
.value
10 July 2013 at 13:30
.row.full
The charge will appear on your account as GOV-UK-REPOSSESSION
%p.template-label-sub Case summary panel
%section.review
%h3.section-header
Case summary
%a.right(href='#') View the case
.moj-panel
.row
.key
Property
.value
Flat 3
%br/
92 Crystal Palace Park Road
%br/
London
%br/
SE26 6UP
.row
.key
Landlord
.value
Mr John Smith Reynolds
.row
.key
Tenant
.value
Mr Louis Robert Stevenson
%p.template-label-sub Hearing details panel
%section.review
%h3.section-header
Hearing details
%a.right(href='#') View full court details
.moj-panel
.row
.key
Hearing date
.value
Wednesday 21 August 2013 at 10:30
.row
.key
Court
.value
Lambeth County Court
.row
.key
Address
.value
Court House
%br/
Cleaver Street
%br/
Kennington Road
%br/
London
%br/
SE11 4DZ
.row.full.map
= image_tag('lambeth-map2.png', alt: 'Lambeth County Court map')
%p.template-label-sub What happens next
%section.next
%h2 What happens next
%ul
%li
We'll send the tenant details of your court action
%li
The tenant has until
%strong 14 August 2013
to respond.
%li
A judge will decide on the case at the hearing on
%strong> 21 August 2013
\.
%p.template-label.closed /Confirmation panels (confirmation page)