{"id":726,"date":"2026-04-19T17:31:58","date_gmt":"2026-04-19T14:31:58","guid":{"rendered":"https:\/\/cattle.expert\/install-calf-journal-tmp-en-jarp0a\/"},"modified":"2026-04-19T17:31:58","modified_gmt":"2026-04-19T14:31:58","slug":"install-calf-journal","status":"publish","type":"page","link":"https:\/\/cattle.expert\/en\/install-calf-journal\/","title":{"rendered":"Install Calf Journal (en)"},"content":{"rendered":"<section class=\"cj-install\">\n  <header class=\"cj-install__hero\">\n    <h1 class=\"cj-install__title\">\n      Install the calf journal on your home screen    <\/h1>\n    <p class=\"cj-install__lead\">\n      One tap and the app opens like any other \u2014 works offline and takes less than 1 MB.    <\/p>\n    <div class=\"cj-install__actions\">\n      <button type=\"button\" class=\"cj-install__cta cj-install__cta--primary\" data-cj-install-btn hidden>\n        Install app      <\/button>\n      <span class=\"cj-install__cta-hint\" data-cj-install-hint>\n        Follow the instructions below \u2014 your browser will install the app in a few seconds.      <\/span>\n    <\/div>\n  <\/header>\n\n  <div class=\"cj-install__grid\">\n    <article class=\"cj-install__card\" data-cj-platform=\"ios\">\n      <h2 class=\"cj-install__card-title\">\n        iPhone \/ iPad (Safari)      <\/h2>\n      <ol class=\"cj-install__steps\">\n        <li>Open this page in Safari.<\/li>\n        <li>Tap the <strong>\u201cShare\u201d<\/strong> button at the bottom of the screen.<\/li>\n        <li>Choose <strong>\u201cAdd to Home Screen\u201d<\/strong> from the list of actions.<\/li>\n        <li>Confirm \u2014 the icon will appear on your home screen.<\/li>\n      <\/ol>\n    <\/article>\n\n    <article class=\"cj-install__card\" data-cj-platform=\"android\">\n      <h2 class=\"cj-install__card-title\">\n        Android (Chrome)      <\/h2>\n      <ol class=\"cj-install__steps\">\n        <li>Open the page in Chrome.<\/li>\n        <li>Tap <strong>\u201cInstall\u201d<\/strong> at the top \u2014 or pick <strong>\u201cInstall app\u201d<\/strong> from the \u22ee menu.<\/li>\n        <li>Confirm the install \u2014 the icon will appear on your home screen.<\/li>\n      <\/ol>\n    <\/article>\n\n    <article class=\"cj-install__card\" data-cj-platform=\"desktop\">\n      <h2 class=\"cj-install__card-title\">\n        Desktop (Chrome \/ Edge)      <\/h2>\n      <ol class=\"cj-install__steps\">\n        <li>Open the page in Chrome or Edge.<\/li>\n        <li>Click the <strong>\u201cInstall app\u201d<\/strong> icon on the right side of the address bar.<\/li>\n        <li>The app opens in its own window \u2014 pin it to the Dock or taskbar.<\/li>\n      <\/ol>\n    <\/article>\n  <\/div>\n\n  <p class=\"cj-install__note\">\n    Once installed the app works offline. Records are kept on your device \u2014 sign in to sync them with the cloud and open them from several devices.  <\/p>\n<\/section>\n<section class=\"l-section wpb_row\"><div class=\"l-section-h i-cf\">\n<article class=\"cattle-calf-page cattle-calf-page--public\">\n\n  <nav class=\"cattle-calf-breadcrumb\" aria-label=\"Site navigation\">\n    <ol>\n      <li><a href=\"https:\/\/cattle.expert\/en\/\">Home<\/a><\/li>\n      <li><a href=\"https:\/\/cattle.expert\/en\/uslugi\/\">Services<\/a><\/li>\n      <li aria-current=\"page\">Calf Journal<\/li>\n    <\/ol>\n  <\/nav>\n\n  <header class=\"cattle-calf-page__header\">\n    <h1 class=\"cattle-calf-page__title\">\n      Calf Journal \u2014 a free online calving log    <\/h1>\n    <p class=\"cattle-calf-page__lead\">\n      Record newborn calves right out in the field, with no internet.    <\/p>\n  <\/header>\n\n  <aside class=\"cattle-calf-install-cta\" role=\"complementary\" data-install-cta>\n    <button type=\"button\"\n            class=\"cattle-calf-install-cta__close\"\n            data-install-cta-close\n            aria-label=\"Dismiss install hint\">\n      <span aria-hidden=\"true\">&times;<\/span>\n    <\/button>\n    <div class=\"cattle-calf-install-cta__body\">\n      <strong class=\"cattle-calf-install-cta__title\">\n        \u0425\u043e\u0442\u0438\u0442\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d?      <\/strong>\n      <p class=\"cattle-calf-install-cta__text\">\n        \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0436\u0443\u0440\u043d\u0430\u043b \u043d\u0430 \u0434\u043e\u043c\u0430\u0448\u043d\u0438\u0439 \u044d\u043a\u0440\u0430\u043d \u2014 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0431\u0435\u0437 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430 \u0438 \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u0438\u043c \u043a\u0430\u0441\u0430\u043d\u0438\u0435\u043c.      <\/p>\n    <\/div>\n    <a class=\"cattle-calf-install-cta__button\" href=\"https:\/\/cattle.expert\/en\/install-calf-journal\/\">\n      How to install      <span aria-hidden=\"true\">\u2192<\/span>\n    <\/a>\n  <\/aside>\n\n  <div class=\"cattle-calf-app cattle-calf-app--public cattle-calf-app--guest\"\n       x-data=\"calfJournalApp({&quot;restUrl&quot;:&quot;https:\\\/\\\/cattle.expert\\\/en\\\/wp-json\\\/cattle-calf\\\/v1\\\/&quot;,&quot;nonce&quot;:&quot;ca1a948086&quot;,&quot;breeds&quot;:[&quot;Angus&quot;,&quot;Hereford&quot;,&quot;Simmental&quot;,&quot;Charolais&quot;,&quot;Limousin&quot;],&quot;visibleFields&quot;:{&quot;calf_uid&quot;:true,&quot;mother_uid&quot;:true,&quot;temp_id&quot;:true},&quot;defaultSettings&quot;:{&quot;ranch_name&quot;:&quot;&quot;,&quot;shift_number&quot;:1,&quot;id_prefix&quot;:&quot;&quot;,&quot;operator_last_name&quot;:&quot;&quot;,&quot;operator_middle_name&quot;:&quot;&quot;,&quot;operator_position&quot;:&quot;&quot;,&quot;operator_phone&quot;:&quot;&quot;,&quot;breeds&quot;:[&quot;Angus&quot;,&quot;Hereford&quot;,&quot;Simmental&quot;,&quot;Charolais&quot;,&quot;Limousin&quot;],&quot;visible_fields&quot;:{&quot;calf_uid&quot;:true,&quot;mother_uid&quot;:true,&quot;temp_id&quot;:true},&quot;ui_language&quot;:&quot;en&quot;},&quot;isGuest&quot;:true,&quot;loginUrl&quot;:&quot;https:\\\/\\\/cattle.expert\\\/en\\\/?auth=login&amp;redirect_to=https:\\\/\\\/cattle.expert\\\/en\\\/install-calf-journal\\\/&quot;,&quot;registerUrl&quot;:&quot;https:\\\/\\\/cattle.expert\\\/en\\\/?auth=register&quot;})\"\n       x-init=\"init()\">\n\n          <div class=\"cattle-calf-guest-banner\" role=\"status\">\n        <div class=\"cattle-calf-guest-banner__body\">\n          <strong class=\"cattle-calf-guest-banner__title\">\n            Guest mode          <\/strong>\n          <p class=\"cattle-calf-guest-banner__text\">\n            Entries are saved only on this device. Register to sync with the cloud, export CSV, and open your data on the veterinarian&#039;s phone.          <\/p>\n        <\/div>\n        <div class=\"cattle-calf-guest-banner__actions\">\n          <button type=\"button\" class=\"cattle-calf-guest-banner__cta\" @click=\"openLoginPopup('register', $event)\">\n            Create an account          <\/button>\n          <button type=\"button\" class=\"cattle-calf-guest-banner__link\" @click=\"openLoginPopup('login', $event)\">\n            Already have an account \u2014 sign in          <\/button>\n        <\/div>\n      <\/div>\n    \n    <!-- Mobile-only tabs -->\n    <nav class=\"cattle-calf-tabs cattle-calf-tabs--mobile\" aria-label=\"App navigation\">\n      <button type=\"button\" :class=\"{ active: tab === 'form' }\" @click=\"tab = 'form'\">\n        <svg class=\"cj-tab-ico\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M11 11V5a1 1 0 1 1 2 0v6h6a1 1 0 1 1 0 2h-6v6a1 1 0 1 1-2 0v-6H5a1 1 0 1 1 0-2h6Z\"\/><\/svg>\n        <span>Add<\/span>\n      <\/button>\n      <button type=\"button\" :class=\"{ active: tab === 'history' }\" @click=\"tab = 'history'\">\n        <svg class=\"cj-tab-ico\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M4 6h16v2H4zM4 11h16v2H4zM4 16h16v2H4z\"\/><\/svg>\n        <span>History<\/span>\n        <span class=\"cattle-calf-tabs__badge\" x-text=\"totalCount\"><\/span>\n      <\/button>\n      <button type=\"button\" :class=\"{ active: tab === 'settings' }\" @click=\"tab = 'settings'\" aria-label=\"Settings\">\n        <svg class=\"cj-tab-ico\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M19.14 12.94a7 7 0 0 0 .06-.94 7 7 0 0 0-.06-.94l2.03-1.58a.5.5 0 0 0 .12-.64l-1.92-3.32a.5.5 0 0 0-.6-.22l-2.39.96a7.1 7.1 0 0 0-1.63-.94l-.36-2.54a.5.5 0 0 0-.5-.42h-3.84a.5.5 0 0 0-.5.42l-.36 2.54c-.59.23-1.14.55-1.63.94l-2.39-.96a.5.5 0 0 0-.6.22L2.25 8.84a.5.5 0 0 0 .12.64l2.03 1.58A7 7 0 0 0 4.34 12c0 .32.02.63.06.94l-2.03 1.58a.5.5 0 0 0-.12.64l1.92 3.32c.14.24.42.34.6.22l2.39-.96c.5.39 1.04.71 1.63.94l.36 2.54c.05.24.25.42.5.42h3.84c.25 0 .45-.18.5-.42l.36-2.54c.59-.23 1.14-.55 1.63-.94l2.39.96c.18.08.46-.02.6-.22l1.92-3.32a.5.5 0 0 0-.12-.64l-2.03-1.58ZM12 15.4A3.4 3.4 0 1 1 12 8.6a3.4 3.4 0 0 1 0 6.8Z\"\/><\/svg>\n      <\/button>\n    <\/nav>\n\n    <!-- Two-panel layout -->\n    <div class=\"cattle-calf-panels\">\n\n      <!-- LEFT: Form panel (30% on desktop) -->\n      <div class=\"cattle-calf-panels__form\" :class=\"{ 'is-active': tab === 'form' }\">\n        <section x-data=\"calfForm()\">\n          <form class=\"cattle-calf-form\" @submit.prevent=\"save\" novalidate>\n\n  <header class=\"cattle-calf-form__header\" x-data=\"{ tipOpen: false }\">\n    <h2 class=\"cattle-calf-form__title\">\n      <span>New entry<\/span>\n      <button type=\"button\"\n              class=\"cattle-calf-form__help\"\n              @click=\"tipOpen = !tipOpen\"\n              :aria-expanded=\"tipOpen.toString()\"\n              aria-controls=\"cj-form-tip\"\n              aria-label=\"Hint\">\n        <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"8\" r=\"7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"\/><path d=\"M6.1 6.3a1.9 1.9 0 0 1 3.8.1c0 1-.7 1.3-1.3 1.7-.4.3-.6.6-.6 1.1M8 11.5v.01\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\"\/><\/svg>\n      <\/button>\n    <\/h2>\n    <p id=\"cj-form-tip\"\n       class=\"cattle-calf-form__tip\"\n       x-show=\"tipOpen\"\n       x-cloak\n       x-transition.opacity.duration.150ms\n       role=\"note\">\n      Record the calving quickly \u2014 you can fill in details later.    <\/p>\n  <\/header>\n\n  <!-- Step 1: Sex (required) \u2014 segmented control -->\n  <fieldset class=\"cattle-calf-form__section cattle-calf-form__section--sex\">\n    <legend class=\"cattle-calf-form__legend\">\n      <span class=\"cattle-calf-form__legend-text\">Sex<\/span>\n      <span class=\"cattle-calf-form__required\" aria-hidden=\"true\">*<\/span>\n    <\/legend>\n    <div class=\"cattle-calf-segment cattle-calf-segment--sex\" :class=\"{ 'cattle-calf-segment--bull': form.sex === 'bull', 'cattle-calf-segment--heifer': form.sex === 'heifer' }\" role=\"radiogroup\" aria-label=\"Calf sex\">\n      <label class=\"cattle-calf-segment__item cattle-calf-segment__item--bull\" :class=\"{ 'cattle-calf-segment__item--active': form.sex === 'bull' }\">\n        <input type=\"radio\" value=\"bull\" x-model=\"form.sex\" class=\"cattle-calf-segment__input\">\n        <span class=\"cattle-calf-segment__icon\" aria-hidden=\"true\">\u2642<\/span>\n        <span class=\"cattle-calf-segment__text\">Bull calf<\/span>\n      <\/label>\n      <label class=\"cattle-calf-segment__item cattle-calf-segment__item--heifer\" :class=\"{ 'cattle-calf-segment__item--active': form.sex === 'heifer' }\">\n        <input type=\"radio\" value=\"heifer\" x-model=\"form.sex\" class=\"cattle-calf-segment__input\">\n        <span class=\"cattle-calf-segment__icon\" aria-hidden=\"true\">\u2640<\/span>\n        <span class=\"cattle-calf-segment__text\">Heifer calf<\/span>\n      <\/label>\n    <\/div>\n    <p class=\"cattle-calf-form__error\" x-show=\"errors.sex\" x-cloak>\n      Select the calf&#039;s sex    <\/p>\n  <\/fieldset>\n\n  <!-- Step 2: Calving difficulty (required) \u2014 color scale -->\n  <fieldset class=\"cattle-calf-form__section cattle-calf-form__section--difficulty\">\n    <legend class=\"cattle-calf-form__legend\">\n      <span class=\"cattle-calf-form__legend-text\">Calving difficulty<\/span>\n      <span class=\"cattle-calf-form__required\" aria-hidden=\"true\">*<\/span>\n    <\/legend>\n        <div class=\"cattle-calf-scale\" role=\"radiogroup\" aria-label=\"Calving difficulty\">\n              <label class=\"cattle-calf-scale__item cattle-calf-scale__item--1\"\n               :class=\"{ 'cattle-calf-scale__item--active': form.calving_difficulty === 1 }\"\n               title=\"Unassisted\">\n          <input type=\"radio\" value=\"1\" x-model.number=\"form.calving_difficulty\" class=\"cattle-calf-scale__input\">\n          <span class=\"cattle-calf-scale__number\">1<\/span>\n        <\/label>\n              <label class=\"cattle-calf-scale__item cattle-calf-scale__item--2\"\n               :class=\"{ 'cattle-calf-scale__item--active': form.calving_difficulty === 2 }\"\n               title=\"Easy pull\">\n          <input type=\"radio\" value=\"2\" x-model.number=\"form.calving_difficulty\" class=\"cattle-calf-scale__input\">\n          <span class=\"cattle-calf-scale__number\">2<\/span>\n        <\/label>\n              <label class=\"cattle-calf-scale__item cattle-calf-scale__item--3\"\n               :class=\"{ 'cattle-calf-scale__item--active': form.calving_difficulty === 3 }\"\n               title=\"Hard pull\">\n          <input type=\"radio\" value=\"3\" x-model.number=\"form.calving_difficulty\" class=\"cattle-calf-scale__input\">\n          <span class=\"cattle-calf-scale__number\">3<\/span>\n        <\/label>\n              <label class=\"cattle-calf-scale__item cattle-calf-scale__item--4\"\n               :class=\"{ 'cattle-calf-scale__item--active': form.calving_difficulty === 4 }\"\n               title=\"Caesarean section\">\n          <input type=\"radio\" value=\"4\" x-model.number=\"form.calving_difficulty\" class=\"cattle-calf-scale__input\">\n          <span class=\"cattle-calf-scale__number\">4<\/span>\n        <\/label>\n              <label class=\"cattle-calf-scale__item cattle-calf-scale__item--5\"\n               :class=\"{ 'cattle-calf-scale__item--active': form.calving_difficulty === 5 }\"\n               title=\"Abnormal presentation\">\n          <input type=\"radio\" value=\"5\" x-model.number=\"form.calving_difficulty\" class=\"cattle-calf-scale__input\">\n          <span class=\"cattle-calf-scale__number\">5<\/span>\n        <\/label>\n          <\/div>\n    <p class=\"cattle-calf-scale__label\" x-show=\"form.calving_difficulty\" x-cloak>\n              <span x-show=\"form.calving_difficulty === 1\"\n              class=\"cattle-calf-scale__label-text cattle-calf-scale__label--1\">\n          Unassisted        <\/span>\n              <span x-show=\"form.calving_difficulty === 2\"\n              class=\"cattle-calf-scale__label-text cattle-calf-scale__label--2\">\n          Easy pull        <\/span>\n              <span x-show=\"form.calving_difficulty === 3\"\n              class=\"cattle-calf-scale__label-text cattle-calf-scale__label--3\">\n          Hard pull        <\/span>\n              <span x-show=\"form.calving_difficulty === 4\"\n              class=\"cattle-calf-scale__label-text cattle-calf-scale__label--4\">\n          Caesarean section        <\/span>\n              <span x-show=\"form.calving_difficulty === 5\"\n              class=\"cattle-calf-scale__label-text cattle-calf-scale__label--5\">\n          Abnormal presentation        <\/span>\n          <\/p>\n    <p class=\"cattle-calf-form__error\" x-show=\"errors.calving_difficulty\" x-cloak>\n      Select the calving difficulty    <\/p>\n  <\/fieldset>\n\n  <!-- Step 3: When (date) \u2014 segmented control with inline date input -->\n  <fieldset class=\"cattle-calf-form__section cattle-calf-form__section--date\">\n    <legend class=\"cattle-calf-form__legend\">\n      <span class=\"cattle-calf-form__legend-text\">When<\/span>\n    <\/legend>\n    <div class=\"cattle-calf-segment cattle-calf-segment--date\" role=\"radiogroup\" aria-label=\"Calving date\">\n      <label class=\"cattle-calf-segment__item\" :class=\"{ 'cattle-calf-segment__item--active': form.birth_date === 'today' }\">\n        <input type=\"radio\" value=\"today\" x-model=\"form.birth_date\" class=\"cattle-calf-segment__input\">\n        <span class=\"cattle-calf-segment__text\">Today<\/span>\n      <\/label>\n      <label class=\"cattle-calf-segment__item\" :class=\"{ 'cattle-calf-segment__item--active': form.birth_date === 'yesterday' }\">\n        <input type=\"radio\" value=\"yesterday\" x-model=\"form.birth_date\" class=\"cattle-calf-segment__input\">\n        <span class=\"cattle-calf-segment__text\">Yesterday<\/span>\n      <\/label>\n      <template x-if=\"form.birth_date !== 'custom'\">\n        <label class=\"cattle-calf-segment__item cattle-calf-segment__item--other-date\" @click.prevent=\"form.birth_date = 'custom'; $nextTick(() => $refs.customDateInput?.focus())\">\n          <span class=\"cattle-calf-segment__text\">Another date<\/span>\n        <\/label>\n      <\/template>\n      <template x-if=\"form.birth_date === 'custom'\">\n        <div class=\"cattle-calf-segment__item cattle-calf-segment__item--date-input\">\n          <input\n            type=\"date\"\n            x-model=\"form.birth_date_custom\"\n            x-ref=\"customDateInput\"\n            :max=\"todayIso\"\n            class=\"cattle-calf-segment__date-field\"\n            aria-label=\"Select the calving date\">\n        <\/div>\n      <\/template>\n    <\/div>\n    <p class=\"cattle-calf-form__error\" x-show=\"form.birth_date === 'custom' && errors.birth_date_custom\" x-cloak>\n      Select a valid date (no later than today)    <\/p>\n  <\/fieldset>\n\n  <!-- Step 4: Advanced (collapsible) -->\n  <details class=\"cattle-calf-form__advanced\" x-data=\"{ open: window.matchMedia('(min-width: 960px)').matches }\" :open=\"open\" @toggle=\"open = $event.target.open\">\n    <summary class=\"cattle-calf-form__advanced-summary\">\n      <span class=\"cattle-calf-form__advanced-chevron\" aria-hidden=\"true\">\u25b8<\/span>\n      <span class=\"cattle-calf-form__advanced-text\">Additional details<\/span>\n      <span class=\"cattle-calf-form__advanced-meta\">ID, dam, weight, breed, comment<\/span>\n    <\/summary>\n\n    <div class=\"cattle-calf-form__advanced-body\">\n              <label class=\"cattle-calf-field cattle-calf-field--floating\">\n          <span class=\"cattle-calf-field__label\">Calf ID<\/span>\n          <input type=\"text\" x-model=\"form.calf_uid\" maxlength=\"64\"\n                 :placeholder=\"nextUidPreview || '2345'\">\n        <\/label>\n      \n              <label class=\"cattle-calf-field cattle-calf-field--floating\">\n          <span class=\"cattle-calf-field__label\">Dam ID<\/span>\n          <input type=\"text\" x-model=\"form.mother_uid\" maxlength=\"64\" placeholder=\"1021\">\n        <\/label>\n      \n              <label class=\"cattle-calf-field cattle-calf-field--floating\">\n          <span class=\"cattle-calf-field__label\">\n            Temporary ID            <span class=\"cattle-calf-field__info\" tabindex=\"0\" role=\"button\" aria-label=\"Hint\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.5\"\/><path d=\"M8 7v4M8 5.5v-.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\n              <span class=\"cattle-calf-field__tooltip\">If the ear tag isn&#039;t ready yet<\/span>\n            <\/span>\n          <\/span>\n          <input type=\"text\" x-model=\"form.temp_id\" maxlength=\"64\" placeholder=\" \">\n        <\/label>\n      \n      <label class=\"cattle-calf-field cattle-calf-field--floating\">\n        <span class=\"cattle-calf-field__label\">Weight (kg)<\/span>\n        <input type=\"number\" step=\"0.1\" min=\"0\" max=\"99\" x-model.number=\"form.weight_kg\" inputmode=\"decimal\" placeholder=\"34\">\n      <\/label>\n\n      <label class=\"cattle-calf-field cattle-calf-field--floating\">\n        <span class=\"cattle-calf-field__label\">Breed<\/span>\n        <select x-model=\"form.breed\">\n          <option value=\"\">\u2014 not specified \u2014<\/option>\n          <template x-for=\"breed in breeds\" :key=\"breed\">\n            <option :value=\"breed\" x-text=\"breed\"><\/option>\n          <\/template>\n        <\/select>\n      <\/label>\n\n      <label class=\"cattle-calf-field cattle-calf-field--floating\">\n        <span class=\"cattle-calf-field__label\">Comment<\/span>\n        <textarea x-model=\"form.comments\" rows=\"3\" placeholder=\"Notes, complications\u2026\"><\/textarea>\n      <\/label>\n    <\/div>\n  <\/details>\n\n  <!-- Sticky submit -->\n  <div class=\"cattle-calf-form__submit-bar\">\n    <button type=\"submit\" class=\"cattle-calf-form__submit\" :disabled=\"saving\">\n      <span x-show=\"!saving\">Save entry<\/span>\n      <span x-show=\"saving\" x-cloak>Saving\u2026<\/span>\n    <\/button>\n  <\/div>\n<\/form>\n        <\/section>\n      <\/div>\n\n      <!-- RIGHT: Content panel (70% on desktop) -->\n      <div class=\"cattle-calf-panels__content\" :class=\"{ 'is-active': tab !== 'form' }\">\n\n        <!-- Desktop-only subtabs -->\n        <nav class=\"cattle-calf-tabs cattle-calf-tabs--desktop\" aria-label=\"Sections\">\n          <button type=\"button\" :class=\"{ active: tab === 'history' || tab === 'form' }\" @click=\"tab = 'history'\">\n            History            <span class=\"cattle-calf-tabs__badge\" x-text=\"totalCount\"><\/span>\n          <\/button>\n          <button type=\"button\" :class=\"{ active: tab === 'settings' }\" @click=\"tab = 'settings'\">\n            <svg class=\"cj-tab-ico\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M19.14 12.94a7 7 0 0 0 .06-.94 7 7 0 0 0-.06-.94l2.03-1.58a.5.5 0 0 0 .12-.64l-1.92-3.32a.5.5 0 0 0-.6-.22l-2.39.96a7.1 7.1 0 0 0-1.63-.94l-.36-2.54a.5.5 0 0 0-.5-.42h-3.84a.5.5 0 0 0-.5.42l-.36 2.54c-.59.23-1.14.55-1.63.94l-2.39-.96a.5.5 0 0 0-.6.22L2.25 8.84a.5.5 0 0 0 .12.64l2.03 1.58A7 7 0 0 0 4.34 12c0 .32.02.63.06.94l-2.03 1.58a.5.5 0 0 0-.12.64l1.92 3.32c.14.24.42.34.6.22l2.39-.96c.5.39 1.04.71 1.63.94l.36 2.54c.05.24.25.42.5.42h3.84c.25 0 .45-.18.5-.42l.36-2.54c.59-.23 1.14-.55 1.63-.94l2.39.96c.18.08.46-.02.6-.22l1.92-3.32a.5.5 0 0 0-.12-.64l-2.03-1.58ZM12 15.4A3.4 3.4 0 1 1 12 8.6a3.4 3.4 0 0 1 0 6.8Z\"\/><\/svg>\n            Settings          <\/button>\n        <\/nav>\n\n        <section x-show=\"tab === 'history' || tab === 'form'\" x-transition x-data=\"calfHistory()\">\n          <div class=\"cattle-calf-history\">\n  <div class=\"cattle-calf-history__toolbar\">\n    <input type=\"search\" placeholder=\"Search by ID, breed, comments\u2026\" x-model=\"query\">\n    <button type=\"button\"\n            class=\"cattle-calf-history__export\"\n            @click=\"exportFiltered\"\n            :disabled=\"!filtered.length\"\n            x-show=\"!(window.calfAppConfig && window.calfAppConfig.isGuest)\"\n            aria-label=\"Export CSV\">\n      <svg class=\"cj-btn-ico\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M12 3a1 1 0 0 1 1 1v9.17l3.3-3.29a1 1 0 0 1 1.4 1.42l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.42L11 13.17V4a1 1 0 0 1 1-1Zm-7 15h14a1 1 0 1 1 0 2H5a1 1 0 1 1 0-2Z\"\/><\/svg>\n      <span class=\"cattle-calf-history__btn-label\">\n        Export        <span class=\"cj-count\" x-text=\"'(' + filtered.length + ')'\"><\/span>\n      <\/span>\n    <\/button>\n  <\/div>\n  <div class=\"cattle-calf-history__table-wrap\">\n  <table class=\"cattle-calf-history__table\">\n    <thead>\n      <tr>\n        <th class=\"cj-col-num\">#<\/th>\n        <th class=\"cj-col-date cj-sortable\" @click=\"sortBy('birth_date')\">Date <span class=\"cj-si\" x-text=\"sortIcon('birth_date')\"><\/span><\/th>\n        <th class=\"cj-col-id cj-dt-only cj-sortable\" @click=\"sortBy('calf_uid')\">ID <span class=\"cj-si\" x-text=\"sortIcon('calf_uid')\"><\/span><\/th>\n        <th class=\"cj-col-breed cj-dt-only cj-sortable\" @click=\"sortBy('breed')\">Breed <span class=\"cj-si\" x-text=\"sortIcon('breed')\"><\/span><\/th>\n        <th class=\"cj-col-sex\">\u2642\u2640<\/th>\n        <th class=\"cj-col-wt cj-sortable\" @click=\"sortBy('weight_kg')\">\u2696 <span class=\"cj-si\" x-text=\"sortIcon('weight_kg')\"><\/span><\/th>\n        <th class=\"cj-col-diff cj-sortable\" @click=\"sortBy('calving_difficulty')\" title=\"Calving difficulty\">\u26a1<\/th>\n        <th class=\"cj-col-cmt cj-dt-only\" title=\"Comment\">\ud83d\udcac<\/th>\n        <th class=\"cj-col-exp\"><\/th>\n      <\/tr>\n    <\/thead>\n    <template x-for=\"(row, index) in filtered\" :key=\"row.client_uuid\">\n      <tbody class=\"cj-row-group\">\n        <tr class=\"cj-row\" @click=\"toggleRow(row.client_uuid)\" :class=\"{'cj-row--expanded': expandedUuid === row.client_uuid}\">\n          <td class=\"cj-col-num\" x-text=\"index + 1\"><\/td>\n          <td class=\"cj-col-date\" x-text=\"fmtDate(row.birth_date)\"><\/td>\n          <td class=\"cj-col-id cj-dt-only\" :title=\"row.calf_uid\" x-text=\"row.calf_uid || '\u2014'\"><\/td>\n          <td class=\"cj-col-breed cj-dt-only\" :title=\"row.breed\" x-text=\"row.breed || '\u2014'\"><\/td>\n          <td class=\"cj-col-sex\">\n            <span :class=\"row.sex === 'bull' ? 'cj-sex-m' : 'cj-sex-f'\" x-text=\"row.sex === 'bull' ? '\u2642' : '\u2640'\"><\/span>\n          <\/td>\n          <td class=\"cj-col-wt\" x-text=\"row.weight_kg || '\u2014'\"><\/td>\n          <td class=\"cj-col-diff\">\n            <span x-show=\"row.calving_difficulty\" class=\"cj-diff-dot\" :class=\"'cj-diff-dot--' + row.calving_difficulty\"><\/span>\n            <span x-show=\"!row.calving_difficulty\">\u2014<\/span>\n          <\/td>\n          <td class=\"cj-col-cmt cj-dt-only\">\n            <span :class=\"row.comments ? 'cj-cmt-on' : 'cj-cmt-off'\">\ud83d\udcac<\/span>\n          <\/td>\n          <td class=\"cj-col-exp\">\n            <span class=\"cj-chv\" :class=\"{'cj-chv--open': expandedUuid === row.client_uuid}\">\u25b8<\/span>\n          <\/td>\n        <\/tr>\n        <tr x-show=\"expandedUuid === row.client_uuid\" class=\"cj-detail-row\" x-cloak>\n          <td colspan=\"9\">\n            <div class=\"cj-detail\">\n              <div class=\"cj-detail__grid\">\n                <div class=\"cj-mb-only\">\n                  <span class=\"cj-detail__label\">ID<\/span>\n                  <span class=\"cj-detail__value\" x-text=\"row.calf_uid || '\u2014'\"><\/span>\n                <\/div>\n                <div>\n                  <span class=\"cj-detail__label\">Dam<\/span>\n                  <span class=\"cj-detail__value\" x-text=\"row.mother_uid || '\u2014'\"><\/span>\n                <\/div>\n                <div class=\"cj-mb-only\">\n                  <span class=\"cj-detail__label\">Breed<\/span>\n                  <span class=\"cj-detail__value\" x-text=\"row.breed || '\u2014'\"><\/span>\n                <\/div>\n                <div>\n                  <span class=\"cj-detail__label\">Temp. ID<\/span>\n                  <span class=\"cj-detail__value\" x-text=\"tempId(row)\"><\/span>\n                <\/div>\n                <div>\n                  <span class=\"cj-detail__label\">Difficulty<\/span>\n                  <span class=\"cj-detail__value\" x-text=\"diffLabel(row.calving_difficulty)\"><\/span>\n                <\/div>\n                <div x-show=\"row.shift_number\">\n                  <span class=\"cj-detail__label\">Shift<\/span>\n                  <span class=\"cj-detail__value\" x-text=\"row.shift_number\"><\/span>\n                <\/div>\n              <\/div>\n              <div x-show=\"row.comments\" class=\"cj-detail__comment\" x-text=\"row.comments\"><\/div>\n              <div class=\"cj-detail__actions\">\n                <button type=\"button\" class=\"cj-detail__delete\" @click.stop=\"remove(row.client_uuid)\">\n                  \ud83d\uddd1 Delete                <\/button>\n              <\/div>\n            <\/div>\n          <\/td>\n        <\/tr>\n      <\/tbody>\n    <\/template>\n    <tbody x-show=\"filtered.length === 0\">\n      <tr>\n        <td colspan=\"9\" class=\"empty\">No entries yet.<\/td>\n      <\/tr>\n    <\/tbody>\n  <\/table>\n  <\/div>\n<\/div>\n        <\/section>\n\n        <section x-show=\"tab === 'settings'\" x-transition x-data=\"calfSettings()\">\n                      <div class=\"cj-settings__guest-hint\" role=\"status\">\n              <p>\n                \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435 \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043e\u0444\u043b\u0430\u0439\u043d.                <button type=\"button\" class=\"cj-settings__guest-hint-link\" @click=\"openLoginPopup('login', $event)\">\n                  Sign in                <\/button>\n                \u0438\u043b\u0438                <button type=\"button\" class=\"cj-settings__guest-hint-link\" @click=\"openLoginPopup('register', $event)\">\n                  \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f                <\/button>\n                \u2014 \u0447\u0442\u043e\u0431\u044b \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441 \u043e\u0431\u043b\u0430\u043a\u043e\u043c.              <\/p>\n            <\/div>\n                    <div class=\"cj-settings\" x-show=\"settings\" x-cloak>\n  <template x-if=\"settings\">\n    <div class=\"cj-settings__layout\">\n\n      <nav class=\"cj-settings__nav\" aria-label=\"Settings sections\">\n        <div class=\"cj-settings__nav-group\">General<\/div>\n        <button type=\"button\" :class=\"{ 'is-active': activeSection === 'ranch' }\" @click=\"activeSection = 'ranch'\">\n          <span class=\"cj-settings__nav-icon\" aria-hidden=\"true\">\ud83c\udfe1<\/span>\n          Ranch        <\/button>\n        <button type=\"button\" :class=\"{ 'is-active': activeSection === 'operator' }\" @click=\"activeSection = 'operator'\">\n          <span class=\"cj-settings__nav-icon\" aria-hidden=\"true\">\ud83d\udc64<\/span>\n          Operator        <\/button>\n        <button type=\"button\" :class=\"{ 'is-active': activeSection === 'breeds' }\" @click=\"activeSection = 'breeds'\">\n          <span class=\"cj-settings__nav-icon\" aria-hidden=\"true\">\ud83d\udc02<\/span>\n          Breeds        <\/button>\n        <button type=\"button\" :class=\"{ 'is-active': activeSection === 'display' }\" @click=\"activeSection = 'display'\">\n          <span class=\"cj-settings__nav-icon\" aria-hidden=\"true\">\ud83d\udc41<\/span>\n          Display        <\/button>\n        <div class=\"cj-settings__nav-group\">Data<\/div>\n        <button type=\"button\" :class=\"{ 'is-active': activeSection === 'data' }\" @click=\"activeSection = 'data'\">\n          <span class=\"cj-settings__nav-icon\" aria-hidden=\"true\">\ud83d\udcbe<\/span>\n          Import \/ Export        <\/button>\n      <\/nav>\n\n      <div class=\"cj-settings__content\">\n\n        <!-- \u0425\u043e\u0437\u044f\u0439\u0441\u0442\u0432\u043e -->\n        <form x-show=\"activeSection === 'ranch'\" x-transition.opacity @submit.prevent=\"save\" class=\"cj-settings__section\">\n          <h3 class=\"cj-settings__title\">Ranch<\/h3>\n          <p class=\"cj-settings__desc\">Ranch name, shift, and the prefix used to auto-generate calf IDs.<\/p>\n\n          <label class=\"cj-settings__field\">\n            <span class=\"cj-settings__label\">Farm name<\/span>\n            <input type=\"text\" x-model=\"settings.ranch_name\">\n          <\/label>\n          <label class=\"cj-settings__field\">\n            <span class=\"cj-settings__label\">Shift number<\/span>\n            <input type=\"number\" min=\"1\" max=\"99\" x-model.number=\"settings.shift_number\">\n          <\/label>\n          <label class=\"cj-settings__field\">\n            <span class=\"cj-settings__label\">Calf ID prefix<\/span>\n            <input type=\"text\" x-model=\"settings.id_prefix\" placeholder=\"optional\">\n          <\/label>\n\n          <div class=\"cj-settings__footer\">\n            <button type=\"submit\" class=\"cj-settings__save\" :disabled=\"saving\">\n              <span x-show=\"!saving\">Save<\/span>\n              <span x-show=\"saving\">\u2026<\/span>\n            <\/button>\n            <span class=\"cj-settings__message\" x-show=\"message\" x-text=\"message\"><\/span>\n          <\/div>\n        <\/form>\n\n        <!-- \u041e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 -->\n        <form x-show=\"activeSection === 'operator'\" x-transition.opacity @submit.prevent=\"save\" class=\"cj-settings__section\">\n          <h3 class=\"cj-settings__title\">Operator<\/h3>\n          <p class=\"cj-settings__desc\">Who fills out the journal. All fields are optional \u2014 fill in what you find useful.<\/p>\n\n          <label class=\"cj-settings__field\">\n            <span class=\"cj-settings__label\">Last name<\/span>\n            <input type=\"text\" x-model=\"settings.operator_last_name\" autocomplete=\"family-name\">\n          <\/label>\n          <label class=\"cj-settings__field\">\n            <span class=\"cj-settings__label\">Patronymic<\/span>\n            <input type=\"text\" x-model=\"settings.operator_middle_name\" autocomplete=\"additional-name\">\n          <\/label>\n          <label class=\"cj-settings__field\">\n            <span class=\"cj-settings__label\">Job title<\/span>\n            <input type=\"text\" x-model=\"settings.operator_position\" placeholder=\"e.g. veterinary technician, zootechnician\">\n          <\/label>\n          <label class=\"cj-settings__field\">\n            <span class=\"cj-settings__label\">Phone<\/span>\n            <input type=\"tel\" x-model=\"settings.operator_phone\" autocomplete=\"tel\" placeholder=\"+7 ___ ___-__-__\">\n          <\/label>\n\n          <div class=\"cj-settings__footer\">\n            <button type=\"submit\" class=\"cj-settings__save\" :disabled=\"saving\">\n              <span x-show=\"!saving\">Save<\/span>\n              <span x-show=\"saving\">\u2026<\/span>\n            <\/button>\n            <span class=\"cj-settings__message\" x-show=\"message\" x-text=\"message\"><\/span>\n          <\/div>\n        <\/form>\n\n        <!-- \u041f\u043e\u0440\u043e\u0434\u044b -->\n        <div x-show=\"activeSection === 'breeds'\" x-transition.opacity class=\"cj-settings__section\">\n          <h3 class=\"cj-settings__title\">Breeds<\/h3>\n          <p class=\"cj-settings__desc\">Breeds available in the Add Calf form.<\/p>\n\n          <ul class=\"cj-settings__breeds\">\n            <template x-for=\"breed in settings.breeds\" :key=\"breed\">\n              <li>\n                <span x-text=\"breed\"><\/span>\n                <button type=\"button\" @click=\"removeBreed(breed); save()\" aria-label=\"Remove breed\">\u00d7<\/button>\n              <\/li>\n            <\/template>\n            <li x-show=\"!settings.breeds.length\" class=\"cj-settings__breeds-empty\">\n              No breeds yet. Add the first one below.            <\/li>\n          <\/ul>\n\n          <form class=\"cj-settings__breed-add\" @submit.prevent=\"addBreed($refs.newBreed.value); $refs.newBreed.value = ''; save()\">\n            <input type=\"text\" x-ref=\"newBreed\" placeholder=\"Add breed\">\n            <button type=\"submit\">+<\/button>\n          <\/form>\n        <\/div>\n\n        <!-- \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 -->\n        <form x-show=\"activeSection === 'display'\" x-transition.opacity @submit.prevent=\"save\" class=\"cj-settings__section\">\n          <h3 class=\"cj-settings__title\">Display<\/h3>\n          <p class=\"cj-settings__desc\">Which fields to show in the form and the history table.<\/p>\n\n          <label class=\"cj-settings__check\">\n            <input type=\"checkbox\" x-model=\"settings.visible_fields.calf_uid\">\n            <span>Show calf ID<\/span>\n          <\/label>\n          <label class=\"cj-settings__check\">\n            <input type=\"checkbox\" x-model=\"settings.visible_fields.mother_uid\">\n            <span>Show dam ID<\/span>\n          <\/label>\n          <label class=\"cj-settings__check\">\n            <input type=\"checkbox\" x-model=\"settings.visible_fields.temp_id\">\n            <span>Show temporary ID<\/span>\n          <\/label>\n\n          <div class=\"cj-settings__footer\">\n            <button type=\"submit\" class=\"cj-settings__save\" :disabled=\"saving\">\n              <span x-show=\"!saving\">Save<\/span>\n              <span x-show=\"saving\">\u2026<\/span>\n            <\/button>\n            <span class=\"cj-settings__message\" x-show=\"message\" x-text=\"message\"><\/span>\n          <\/div>\n        <\/form>\n\n        <!-- \u0414\u0430\u043d\u043d\u044b\u0435 (\u0418\u043c\u043f\u043e\u0440\u0442 \/ \u042d\u043a\u0441\u043f\u043e\u0440\u0442) -->\n        <div x-show=\"activeSection === 'data'\" x-transition.opacity class=\"cj-settings__section cj-data\" x-data=\"calfImport()\">\n          <h3 class=\"cj-settings__title\">Import \/ Export<\/h3>\n          <p class=\"cj-settings__desc\">Backups, data migration, and clearing the journal. For a quick export of the current view, use the button in the history table.<\/p>\n\n          <div class=\"cj-data__grid\">\n\n            <div class=\"cj-data__action cj-data__action--primary\">\n              <div class=\"cj-data__leading\" aria-hidden=\"true\">\u2193<\/div>\n              <div class=\"cj-data__body\">\n                <div class=\"cj-data__title\">CSV import<\/div>\n                <div class=\"cj-data__desc\">Upload records from a CSV file. Compatible with exports from Excel and Google Sheets.<\/div>\n                <label class=\"cj-data__file\">\n                  <input type=\"file\" accept=\".csv,text\/csv\" @change=\"handleFile($event)\">\n                  <span x-text=\"file ? file.name : 'Choose file\u2026'\"><\/span>\n                <\/label>\n                <button type=\"button\" class=\"cj-data__btn cj-data__btn--primary\" :disabled=\"!file || importing\" @click=\"doImport\">\n                  <span x-show=\"!importing\">Import<\/span>\n                  <span x-show=\"importing\">\u2026<\/span>\n                <\/button>\n                <p class=\"cj-data__result\" x-show=\"result\" x-text=\"result\"><\/p>\n              <\/div>\n            <\/div>\n\n            <div class=\"cj-data__action\">\n              <div class=\"cj-data__leading\" aria-hidden=\"true\">\u2191<\/div>\n              <div class=\"cj-data__body\">\n                <div class=\"cj-data__title\">Export the whole journal<\/div>\n                <div class=\"cj-data__desc\">All records, including soft-deleted ones. Suitable for a backup.<\/div>\n                <button type=\"button\" class=\"cj-data__btn\" @click=\"$dispatch('calf:export-all')\">\n                  Download CSV                <\/button>\n              <\/div>\n            <\/div>\n\n          <\/div>\n\n          <div class=\"cj-data__danger\">\n            <h4 class=\"cj-data__danger-title\">Danger zone<\/h4>\n            <button type=\"button\" class=\"cj-data__action cj-data__action--danger\" @click=\"$dispatch('calf:delete-all')\">\n              <div class=\"cj-data__leading\" aria-hidden=\"true\">\u26a0<\/div>\n              <div class=\"cj-data__body\">\n                <div class=\"cj-data__title\">Delete all records<\/div>\n                <div class=\"cj-data__desc\">Export first \u2014 deletion is irreversible.<\/div>\n              <\/div>\n            <\/button>\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/template>\n<\/div>\n        <\/section>\n      <\/div>\n    <\/div>\n\n    <div class=\"cattle-calf-app__status\" x-show=\"syncStatus\" x-cloak>\n      <span x-text=\"syncStatus\"><\/span>\n    <\/div>\n\n    <div class=\"cattle-calf-toast-root\"><\/div>\n\n    <div class=\"cj-auth-modal\"\n     x-data=\"calfAuth()\"\n     x-show=\"open\"\n     x-cloak\n     @keydown.escape.window=\"close()\"\n     @click.self=\"close()\"\n     @cj-open-login.window=\"openLogin()\"\n     @cj-open-register.window=\"openRegister()\"\n     role=\"dialog\"\n     aria-modal=\"true\"\n     :aria-label=\"mode === 'register' ? 'Register' : (mode === 'lostpassword' ? 'Password recovery' : 'Sign in')\">\n  <div class=\"cj-auth-modal__card\" @click.stop>\n\n    <div class=\"cj-auth-modal__header\">\n      <h2 class=\"cj-auth-modal__title\" x-text=\"mode === 'register' ? 'Create an account' : (mode === 'lostpassword' ? 'Password recovery' : 'Sign in to your account')\"><\/h2>\n      <button type=\"button\"\n              class=\"cj-auth-modal__close\"\n              @click=\"close()\"\n              aria-label=\"Close\">\n        <span aria-hidden=\"true\">&times;<\/span>\n      <\/button>\n    <\/div>\n\n    <div class=\"cj-auth-modal__tabs\" role=\"tablist\" x-show=\"mode !== 'lostpassword'\">\n      <button type=\"button\"\n              class=\"cj-auth-modal__tab\"\n              :class=\"{ 'is-active': mode === 'login' }\"\n              @click=\"switchMode('login')\"\n              role=\"tab\"\n              :aria-selected=\"mode === 'login'\">\n        Sign in      <\/button>\n      <button type=\"button\"\n              class=\"cj-auth-modal__tab\"\n              :class=\"{ 'is-active': mode === 'register' }\"\n              @click=\"switchMode('register')\"\n              role=\"tab\"\n              :aria-selected=\"mode === 'register'\">\n        Register      <\/button>\n    <\/div>\n\n    <form class=\"cj-auth-modal__body\" @submit.prevent=\"submit()\">\n\n      <template x-if=\"errorMsg\">\n        <div class=\"cj-auth-modal__error\" role=\"alert\" x-text=\"errorMsg\"><\/div>\n      <\/template>\n\n      <template x-if=\"successMsg\">\n        <div class=\"cj-auth-modal__success\" role=\"status\" x-text=\"successMsg\"><\/div>\n      <\/template>\n\n      <!-- LOGIN -->\n      <template x-if=\"mode === 'login'\">\n        <div>\n          <label class=\"cj-auth-modal__field\">\n            <span class=\"cj-auth-modal__label\">Username or email<\/span>\n            <input type=\"text\"\n                   name=\"username\"\n                   class=\"cj-auth-modal__input\"\n                   x-model=\"form.username\"\n                   autocomplete=\"username\"\n                   autocapitalize=\"none\"\n                   autocorrect=\"off\"\n                   spellcheck=\"false\"\n                   required>\n          <\/label>\n\n          <label class=\"cj-auth-modal__field\">\n            <span class=\"cj-auth-modal__label\">Password<\/span>\n            <div class=\"cj-auth-modal__input-wrap\">\n              <input :type=\"showPwd ? 'text' : 'password'\"\n                     name=\"password\"\n                     class=\"cj-auth-modal__input\"\n                     x-model=\"form.password\"\n                     autocomplete=\"current-password\"\n                     required>\n              <button type=\"button\"\n                      class=\"cj-auth-modal__show-pwd\"\n                      @click=\"showPwd = !showPwd\"\n                      :aria-label=\"showPwd ? 'Hide password' : 'Show password'\"\n                      x-text=\"showPwd ? 'Dismiss' : 'Show'\"><\/button>\n            <\/div>\n          <\/label>\n\n          <button type=\"submit\" class=\"cj-auth-modal__submit\" :disabled=\"loading\">\n            <span x-show=\"!loading\">Sign in<\/span>\n            <span x-show=\"loading\" class=\"cj-auth-modal__spinner\" aria-hidden=\"true\"><\/span>\n            <span x-show=\"loading\">Signing in\u2026<\/span>\n          <\/button>\n\n          <p class=\"cj-auth-modal__footer\">\n            <a href=\"#\"\n               @click.prevent=\"switchMode('lostpassword')\"\n               x-show=\"!loading\">Forgot password?<\/a>\n            <br>\n            No account yet?            <a href=\"#\" @click.prevent=\"switchMode('register')\">Sign up<\/a>\n          <\/p>\n        <\/div>\n      <\/template>\n\n      <!-- REGISTER -->\n      <template x-if=\"mode === 'register'\">\n        <div>\n          <label class=\"cj-auth-modal__field\">\n            <span class=\"cj-auth-modal__label\">Email<\/span>\n            <input type=\"email\"\n                   name=\"email\"\n                   class=\"cj-auth-modal__input\"\n                   x-model=\"form.email\"\n                   autocomplete=\"email\"\n                   autocapitalize=\"none\"\n                   autocorrect=\"off\"\n                   spellcheck=\"false\"\n                   required>\n          <\/label>\n\n          <label class=\"cj-auth-modal__field\">\n            <span class=\"cj-auth-modal__label\">Name (optional)<\/span>\n            <input type=\"text\"\n                   name=\"first_name\"\n                   class=\"cj-auth-modal__input\"\n                   x-model=\"form.firstName\"\n                   autocomplete=\"given-name\">\n          <\/label>\n\n          <label class=\"cj-auth-modal__field\">\n            <span class=\"cj-auth-modal__label\">Password<\/span>\n            <div class=\"cj-auth-modal__input-wrap\">\n              <input :type=\"showPwd ? 'text' : 'password'\"\n                     name=\"password\"\n                     class=\"cj-auth-modal__input\"\n                     x-model=\"form.password\"\n                     autocomplete=\"new-password\"\n                     minlength=\"8\"\n                     required>\n              <button type=\"button\"\n                      class=\"cj-auth-modal__show-pwd\"\n                      @click=\"showPwd = !showPwd\"\n                      x-text=\"showPwd ? 'Dismiss' : 'Show'\"><\/button>\n            <\/div>\n          <\/label>\n          <p class=\"cj-auth-modal__hint\">At least 8 characters.<\/p>\n\n          <button type=\"submit\" class=\"cj-auth-modal__submit\" :disabled=\"loading\">\n            <span x-show=\"!loading\">Create an account<\/span>\n            <span x-show=\"loading\" class=\"cj-auth-modal__spinner\" aria-hidden=\"true\"><\/span>\n            <span x-show=\"loading\">Creating\u2026<\/span>\n          <\/button>\n\n          <p class=\"cj-auth-modal__footer\">\n            Already have an account?            <a href=\"#\" @click.prevent=\"switchMode('login')\">Sign in<\/a>\n          <\/p>\n        <\/div>\n      <\/template>\n\n      <!-- LOSTPASSWORD -->\n      <template x-if=\"mode === 'lostpassword'\">\n        <div>\n          <p class=\"cj-auth-modal__hint\">Enter your email \u2014 we&#039;ll send you a link to reset your password.<\/p>\n\n          <label class=\"cj-auth-modal__field\">\n            <span class=\"cj-auth-modal__label\">Email<\/span>\n            <input type=\"email\"\n                   name=\"lost_email\"\n                   class=\"cj-auth-modal__input\"\n                   x-model=\"form.lostEmail\"\n                   autocomplete=\"email\"\n                   autocapitalize=\"none\"\n                   autocorrect=\"off\"\n                   spellcheck=\"false\"\n                   required>\n          <\/label>\n\n          <button type=\"submit\" class=\"cj-auth-modal__submit\" :disabled=\"loading\">\n            <span x-show=\"!loading\">Send link<\/span>\n            <span x-show=\"loading\" class=\"cj-auth-modal__spinner\" aria-hidden=\"true\"><\/span>\n            <span x-show=\"loading\">Sending\u2026<\/span>\n          <\/button>\n\n          <p class=\"cj-auth-modal__footer\">\n            <a href=\"#\" @click.prevent=\"switchMode('login')\">\u2190 Back to login<\/a>\n          <\/p>\n        <\/div>\n      <\/template>\n\n    <\/form>\n  <\/div>\n<\/div>\n  <\/div>\n\n<\/article>\n<\/div><\/section>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-calf-app.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-726","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/cattle.expert\/en\/wp-json\/wp\/v2\/pages\/726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cattle.expert\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cattle.expert\/en\/wp-json\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/cattle.expert\/en\/wp-json\/wp\/v2\/comments?post=726"}],"version-history":[{"count":0,"href":"https:\/\/cattle.expert\/en\/wp-json\/wp\/v2\/pages\/726\/revisions"}],"wp:attachment":[{"href":"https:\/\/cattle.expert\/en\/wp-json\/wp\/v2\/media?parent=726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}