| 1 | <html xmlns="http://www.w3.org/1999/xhtml" |
|---|
| 2 | xml:lang="en" |
|---|
| 3 | xmlns:tal="http://xml.zope.org/namespaces/tal" |
|---|
| 4 | xmlns:metal="http://xml.zope.org/namespaces/metal" |
|---|
| 5 | xmlns:i18n="http://xml.zope.org/namespaces/i18n" |
|---|
| 6 | i18n:domain="OpenWorkouts" |
|---|
| 7 | metal:use-macro="load: base.pt" |
|---|
| 8 | tal:attributes="lang request.locale_name"> |
|---|
| 9 | |
|---|
| 10 | <metal:head-title metal:fill-slot="head-title"> |
|---|
| 11 | <tal:t i18n:translate="">Edit profile</tal:t> |
|---|
| 12 | </metal:head-title> |
|---|
| 13 | |
|---|
| 14 | <metal:title metal:fill-slot="title"> |
|---|
| 15 | <tal:t i18n:translate="">Edit profile</tal:t> |
|---|
| 16 | </metal:title> |
|---|
| 17 | |
|---|
| 18 | <metal:css metal:fill-slot="css"> |
|---|
| 19 | <link rel="stylesheet" href="${request.static_url('ow:static/components/pickadate/themes/default.css')}" /> |
|---|
| 20 | <link rel="stylesheet" href="${request.static_url('ow:static/components/pickadate/themes/default.date.css')}" /> |
|---|
| 21 | </metal:css> |
|---|
| 22 | |
|---|
| 23 | <metal:content metal:fill-slot="content"> |
|---|
| 24 | <div class="edit-profile ow-forms"> |
|---|
| 25 | <a href="" class="back" |
|---|
| 26 | tal:attributes="href request.resource_url(context, 'profile')" |
|---|
| 27 | i18n:translate="">Cancel</a> |
|---|
| 28 | <h2 i18n:translate="">Edit profile</h2> |
|---|
| 29 | ${form.begin(multipart=True)} |
|---|
| 30 | ${form.csrf_token()} |
|---|
| 31 | |
|---|
| 32 | <fieldset> |
|---|
| 33 | <div class="input-container ly-flex ly-2 has-gap"> |
|---|
| 34 | <div> |
|---|
| 35 | <label for="email" i18n:translate="">Email address:</label> |
|---|
| 36 | ${form.errorlist('email')} |
|---|
| 37 | ${form.text('email')} |
|---|
| 38 | </div> |
|---|
| 39 | <div> |
|---|
| 40 | <label for="nickname" i18n:translate="">Nickname:</label> |
|---|
| 41 | ${form.errorlist('nickname')} |
|---|
| 42 | ${form.text('nickname')} |
|---|
| 43 | </div> |
|---|
| 44 | </div> |
|---|
| 45 | <div class="input-container ly-flex ly-2 has-gap"> |
|---|
| 46 | <div> |
|---|
| 47 | <tal:c tal:condition="getattr(context, 'picture', None)"> |
|---|
| 48 | |
|---|
| 49 | <label for="current_picture" i18n:translate=""> |
|---|
| 50 | Current picture:</label> |
|---|
| 51 | <img id="current_picture" |
|---|
| 52 | tal:attributes="src request.resource_path(context, 'picture', query={'size': 200})" |
|---|
| 53 | width="150"> |
|---|
| 54 | </tal:c> |
|---|
| 55 | </div> |
|---|
| 56 | <div> |
|---|
| 57 | <label for="picture" i18n:translate=""> |
|---|
| 58 | Picture (jpg, jpeg, png or gif):</label> |
|---|
| 59 | ${form.errorlist('picture')} |
|---|
| 60 | ${form.file('picture')} |
|---|
| 61 | </div> |
|---|
| 62 | </div> |
|---|
| 63 | <div class="input-container ly-flex ly-3 has-gap"> |
|---|
| 64 | <div> |
|---|
| 65 | <label for="firstname" i18n:translate="">First name:</label> |
|---|
| 66 | ${form.errorlist('firstname')} |
|---|
| 67 | ${form.text('firstname')} |
|---|
| 68 | </div> |
|---|
| 69 | <div> |
|---|
| 70 | <label for="lastname" i18n:translate="">Last name:</label> |
|---|
| 71 | ${form.errorlist('lastname')} |
|---|
| 72 | ${form.text('lastname')} |
|---|
| 73 | </div> |
|---|
| 74 | <div> |
|---|
| 75 | <label for="gender" i18n:translate="">Gender:</label> |
|---|
| 76 | ${form.errorlist('gender')} |
|---|
| 77 | ${form.select('gender', ['male', 'female'])} |
|---|
| 78 | </div> |
|---|
| 79 | </div> |
|---|
| 80 | |
|---|
| 81 | <div class="input-container ly-flex ly-3 has-gap"> |
|---|
| 82 | <div> |
|---|
| 83 | <label for="birth_date" i18n:translate="">Birth date:</label> |
|---|
| 84 | ${form.errorlist('birth_date')} |
|---|
| 85 | ${form.date('birth_date', date_format='%d/%m/%Y')} |
|---|
| 86 | </div> |
|---|
| 87 | <div> |
|---|
| 88 | <label for="height" i18n:translate="">Height (meters):</label> |
|---|
| 89 | ${form.errorlist('height')} |
|---|
| 90 | ${form.text('height')} |
|---|
| 91 | </div> |
|---|
| 92 | <div> |
|---|
| 93 | <label for="weight" i18n:translate="">Weight (kg):</label> |
|---|
| 94 | ${form.errorlist('weight')} |
|---|
| 95 | ${form.text('weight')} |
|---|
| 96 | </div> |
|---|
| 97 | </div> |
|---|
| 98 | <p> |
|---|
| 99 | <label for="bio" i18n:translate="">Bio/About you:</label> |
|---|
| 100 | ${form.errorlist('bio')} |
|---|
| 101 | ${form.textarea('bio', rows=10, cols=50)} |
|---|
| 102 | </p> |
|---|
| 103 | <div> |
|---|
| 104 | <label for="timezone" i18n:translate="">Timezone:</label> |
|---|
| 105 | <small i18n:translate=""> |
|---|
| 106 | All dates and times will be formatted for this timezone |
|---|
| 107 | </small> |
|---|
| 108 | </div> |
|---|
| 109 | ${form.errorlist('timezone')} |
|---|
| 110 | ${form.select('timezone', timezones)} |
|---|
| 111 | </fieldset> |
|---|
| 112 | |
|---|
| 113 | <p> |
|---|
| 114 | ${form.submit("submit", "Save", **{'class':"button button-normal"})} |
|---|
| 115 | </p> |
|---|
| 116 | ${form.end()} |
|---|
| 117 | </div> |
|---|
| 118 | |
|---|
| 119 | </metal:content> |
|---|
| 120 | |
|---|
| 121 | <metal:body-js metal:fill-slot="body-js"> |
|---|
| 122 | <script src="${request.static_url('ow:static/components/pickadate/picker.js')}"></script> |
|---|
| 123 | <script src="${request.static_url('ow:static/components/pickadate/picker.date.js')}"></script> |
|---|
| 124 | <script type="text/javascript"> |
|---|
| 125 | $(document).ready(function() { |
|---|
| 126 | var today = new Date(); |
|---|
| 127 | var first_year = new Date(); |
|---|
| 128 | // start 100 years ago, should be enough for birth date |
|---|
| 129 | first_year.setMonth(first_year.getMonth() - 1200); |
|---|
| 130 | $('#birth_date').pickadate({ |
|---|
| 131 | format: 'dd/mm/yyyy', |
|---|
| 132 | formatSubmit: 'dd/mm/yyyy', |
|---|
| 133 | selectMonths: true, |
|---|
| 134 | selectYears: 100, |
|---|
| 135 | min: first_year, |
|---|
| 136 | max: today |
|---|
| 137 | }); |
|---|
| 138 | }); |
|---|
| 139 | </script> |
|---|
| 140 | </metal:body-js> |
|---|
| 141 | |
|---|
| 142 | </html> |
|---|
