<html
  xmlns:tal="http://xml.zope.org/namespaces/tal"
  xmlns:metal="http://xml.zope.org/namespaces/metal"
  i18n:domain="plone">

  <body>
    <metal:view_macro define-macro="view">
      <span metal:define-macro="string-field-view"
            tal:define="uid context/UID|nothing"
            tal:attributes="id string:parent-fieldname-$fieldName-$uid">
        <span metal:define-slot="inside"
              tal:define="value accessor;
                          value python: widget.ulocalized_time(value, context=context, request=request) if value else ''"
              tal:replace="value">Date</span>
      </span>
    </metal:view_macro>

    <metal:search_macro define-macro="search">
      <div metal:use-macro="here/widgets/string/macros/edit"/>
    </metal:search_macro>

    <metal:edit_macro define-macro="edit">
      <tal:static define="portal context/@@plone_portal_state/portal;
                          static_path string:${portal/absolute_url}/senaite_widgets">
        <link rel="stylesheet" type="text/css" media="all" href=""
              tal:attributes="href string:${static_path}/datetimewidget.css"/>
      </tal:static>
      <metal:use use-macro="field_macro | context/widgets/field/macros/edit">
        <!-- Note: The displayed date format will differ from the actual value —
             the displayed date is formatted based on the locale of the user's
             browser, but the parsed value is always formatted yyyy-mm-dd.
        -->
        <div class="text-left" metal:fill-slot="widget_body">
          <div class="input-group flex-nowrap d-inline-flex w-auto datetimewidget">
            <!-- date -->
            <input
              type="date"
              class="form-control form-control-sm"
              tal:attributes="
                    python:widget.attrs();
                    target fieldName;
                    name string:${fieldName}-date;
                    value python:widget.get_date(value) if value else '';"/>
            <!-- time -->
            <input
              type="time"
              class="form-control form-control-sm"
              tal:condition="python:widget.show_time"
              tal:attributes="
                    target fieldName;
                    name string:${fieldName}-time;
                    value python:widget.get_time(value) if value else '';"/>
          </div>
          <!-- datetime value (outside to avoid style issues) -->
          <input
            type="hidden"
            tal:attributes="
                  name string:${fieldName};
                  value python:widget.to_local_date(value, context=context, request=request) if value else '';"/>
        </div>

      </metal:use>
    </metal:edit_macro>

  </body>

</html>
