{# templates/timetracking/week.html.twig #}
{% extends 'base.html.twig' %}

{% from '_macros/helpers.html.twig' import smart_date %}

{% set months       = deMonths() %}
{% set monthsShort  = deMonthsShort() %}
{% set weekdays     = deWeekdays() %}
{% set weekdaysShort= deWeekdaysShort() %}

{% block title %}
  {{ smart_date(currentDate, todayStr, tomorrowStr, yesterdayStr, months, weekdays) }}
{% endblock %}

{% block body %}

<script>
window.TT = {
  activeDate: '{{ currentDate|date('Y-m-d') }}',
  trackingInterval: {{ trackingInterval }},
  projects: [
    {% for project in projects %}
    { id: {{ project.id }}, name: {{ project.name|json_encode|raw }}, clientName: {{ project.client.name|json_encode|raw }} }{% if not loop.last %},{% endif %}
    {% endfor %}
  ],
  services: [
    {% for service in services %}
    { id: {{ service.id }}, name: {{ service.name|json_encode|raw }}, billable: {{ service.billable ? 'true' : 'false' }} }{% if not loop.last %},{% endif %}
    {% endfor %}
  ],
  i18n: {
    today:          {{ 'app.date.today'|trans|json_encode|raw }},
    tomorrow:       {{ 'app.date.tomorrow'|trans|json_encode|raw }},
    yesterday:      {{ 'app.date.yesterday'|trans|json_encode|raw }},
    weekLabel:      {{ 'app.date.week_label'|trans|json_encode|raw }},
    months:         {{ months|json_encode|raw }},
    monthsShort:    {{ monthsShort|json_encode|raw }},
    weekdays:       {{ weekdays|json_encode|raw }},
    weekdaysShort:  {{ weekdaysShort|json_encode|raw }},
    prevWeek:       {{ 'app.nav.prev_week'|trans|json_encode|raw }},
    nextWeek:       {{ 'app.nav.next_week'|trans|json_encode|raw }},
    monthView:      {{ 'app.nav.month_view'|trans|json_encode|raw }},
    prevMonth:      {{ 'app.nav.prev_month'|trans|json_encode|raw }},
    nextMonth:      {{ 'app.nav.next_month'|trans|json_encode|raw }},
    billable:       {{ 'app.service.billable'|trans|json_encode|raw }},
    notBillable:    {{ 'app.service.not_billable'|trans|json_encode|raw }},
    selectPh:       {{ 'app.entry.select_placeholder'|trans|json_encode|raw }},
    noEntries:      {{ 'app.entry.no_entries'|trans|json_encode|raw }},
    btnSave:        {{ 'app.entry.btn_save'|trans|json_encode|raw }},
    btnCancel:      {{ 'app.entry.btn_cancel'|trans|json_encode|raw }},
    btnEdit:        {{ 'app.entry.btn_edit'|trans|json_encode|raw }},
    btnDelete:      {{ 'app.entry.btn_delete'|trans|json_encode|raw }},
    labelDuration:  {{ 'app.entry.label_duration'|trans|json_encode|raw }},
    labelProjectService: {{ 'app.entry.label_project_service'|trans|json_encode|raw }},
    labelLabel:     {{ 'app.entry.label_label'|trans|json_encode|raw }},
    placeholderLabel: {{ 'app.entry.placeholder_label'|trans|json_encode|raw }},
    labelNote:      {{ 'app.entry.label_note'|trans|json_encode|raw }},
    confirmDelete:  {{ 'app.entry.confirm_delete'|trans|json_encode|raw }},
    errorNoProject: {{ 'app.entry.error_no_project'|trans|json_encode|raw }},
    errorSave:      {{ 'app.entry.error_save'|trans|json_encode|raw }},
    errorDelete:    {{ 'app.entry.error_delete'|trans|json_encode|raw }},
    errorLoad:      {{ 'app.entry.error_load'|trans|json_encode|raw }},
    durationHint:   {{ 'app.entry.duration_hint'|trans|json_encode|raw }},
    errorZeroDuration: {{ 'app.entry.error_zero_duration'|trans|json_encode|raw }},
    errorDurationTooLong: {{ 'app.entry.error_duration_too_long'|trans|json_encode|raw }},
    errorDailyLimitExceeded: {{ 'app.entry.error_daily_limit_exceeded'|trans|json_encode|raw }},
    warnDurationLong: {{ 'app.entry.warn_duration_long'|trans|json_encode|raw }},
    invoicedTitle:  {{ 'app.entry.invoiced_title'|trans|json_encode|raw }},
    noteShow:       {{ 'app.entry.note_show'|trans|json_encode|raw }},
    noteHide:       {{ 'app.entry.note_hide'|trans|json_encode|raw }},
    btnTimerToggle: {{ 'app.stopwatch.resume'|trans|json_encode|raw }},
    confirmTimerReplace: {{ 'app.stopwatch.confirm_replace'|trans|json_encode|raw }},
  },
};
</script>

<div class="tt-page">

  {% include '_sections/tt-header.html.twig' %}

  <div class="greeting">
    <span class="greeting__text">{{ greeting }}, {{ firstName }}!</span>
  </div>

  <main class="tt-content">

    <div class="entry-form" id="entry-form">
      <div class="entry-form__grid">

        <label class="entry-form__label">{{ 'app.entry.label_duration'|trans }}</label>
        <div class="entry-form__field">
          <input type="text" id="create-duration" class="input input--sm" value="0:00" autocomplete="off" />
          {% include '_atoms/duration-help.html.twig' %}
        </div>

        <label class="entry-form__label">{{ 'app.entry.label_project'|trans }}</label>
        <div class="entry-form__field">
          <select id="create-project" class="select">
            <option value="">{{ 'app.entry.select_placeholder'|trans }}</option>
            {% set currentClient = null %}
            {% for project in projects %}
              {% if project.client.name != currentClient %}
                {% if currentClient is not null %}</optgroup>{% endif %}
                <optgroup label="{{ project.client.name }}">
                {% set currentClient = project.client.name %}
              {% endif %}
              <option value="{{ project.id }}">{{ project.name }}</option>
            {% endfor %}
            {% if currentClient is not null %}</optgroup>{% endif %}
          </select>
        </div>

        <label class="entry-form__label">{{ 'app.entry.label_service'|trans }}</label>
        <div class="entry-form__field">
          <select id="create-service" class="select">
            <option value="">{{ 'app.entry.select_placeholder'|trans }}</option>
            {% set currentGroup = null %}
            {% for service in services %}
              {% set group = service.billable ? 'app.service.billable'|trans : 'app.service.not_billable'|trans %}
              {% if group != currentGroup %}
                {% if currentGroup is not null %}</optgroup>{% endif %}
                <optgroup label="{{ group }}">
                {% set currentGroup = group %}
              {% endif %}
              <option value="{{ service.id }}">{{ service.name }}</option>
            {% endfor %}
            {% if currentGroup is not null %}</optgroup>{% endif %}
          </select>
        </div>

        <label class="entry-form__label">{{ 'app.entry.label_label'|trans }}</label>
        <div class="entry-form__field entry-form__field--label">
          <div class="label-chips" id="create-label-chips"></div>
          <div class="label-input-wrap">
            <input type="text" id="create-label" class="input input--sm"
                   placeholder="{{ 'app.entry.placeholder_label'|trans }}" autocomplete="off" />
            <div class="label-autocomplete" id="create-label-autocomplete" hidden></div>
          </div>
        </div>

        <label class="entry-form__label entry-form__label--note">{{ 'app.entry.label_note'|trans }}</label>
        <div class="entry-form__field entry-form__field--note">
          <textarea id="create-note" class="textarea" rows="3"
                    placeholder="{{ 'app.entry.placeholder_note'|trans }}"></textarea>
        </div>

        {# Minimal-Modus: Bemerkung-Toggle (nur via CSS/JS sichtbar) #}
        <div class="entry-form__note-toggle-row">
          <button type="button" class="entry-form__note-toggle" id="btn-note-toggle">
            {{ 'app.entry.note_show'|trans }}
          </button>
        </div>

        <div class="entry-form__actions">
          <button type="button" class="btn btn-primary" id="btn-create">
            {{ 'app.entry.btn_create'|trans }}
          </button>
        </div>

      </div>
    </div>

    {# Minimal-Modus: Summary-Zeile zum Aufklappen #}
    {% if timeEntries is not empty %}
    <div class="entry-list__summary" id="entry-list-summary">
      <button type="button" class="entry-list__summary-btn" id="btn-entries-toggle">
        <span class="entry-list__summary-count">{{ timeEntries|length }} {{ timeEntries|length == 1 ? 'app.entry.count_one'|trans : 'app.entry.count_other'|trans }}</span>
        <span class="entry-list__summary-sep">·</span>
        <span class="entry-list__summary-total">{{ totalDuration }}</span>
        <span class="entry-list__summary-arrow">▾</span>
      </button>
    </div>
    {% endif %}

    <div class="entry-list" id="entry-list" data-date="{{ currentDate|date('Y-m-d') }}">
      {% if timeEntries is empty %}
        <div class="empty-state" id="empty-state">
          <p class="empty-state__title">{{ 'app.entry.no_entries'|trans }}</p>
        </div>
      {% else %}
        <div class="entry-list__items" id="entry-items">
          {% for entry in timeEntries %}
            {% include 'timetracking/_entry_row.html.twig' with { entry: entry } %}
          {% endfor %}
        </div>
        <div class="entry-list__footer" id="entry-footer">
          <span class="entry-list__total">{{ totalDuration }}</span>
        </div>
      {% endif %}
    </div>

  </main>
</div>

{% endblock %}

{% block javascripts %}
  {{ parent() }}
{% endblock %}