{% set weight_translations = {
    'below_1_5': __('from 0,5 kg to 1,5 kg', 'woodmart'),
    '1_5-3': __('from 1.5 to 3 kg', 'woodmart'),
    '3-5': __('from 3 to 5 kg', 'woodmart'),
    '5-8': __('from 5 to 8 kg', 'woodmart'),
    '8-11': __('from 8 to 11 kg', 'woodmart'),
    '11-15': __('from 11 to 15 kg', 'woodmart'),
    '15-20': __('from 15 to 20 kg', 'woodmart'),
    '20-25': __('from 20 to 25 kg', 'woodmart'),
    '25-35': __('from 25 to 35 kg', 'woodmart'),
    'more_35': __('More than 35 kg', 'woodmart')
} %}

{% set old_translations = {
    'normal': __('Adult (from 1 year to 7 years)', 'woodmart'),
    'old': __('Elderly (from 7 to 12 years)', 'woodmart'),
    'very_old': __('Aging (12 years and older)', 'woodmart'),
    'baby': __('Baby (from 0 to 1 year)', 'woodmart')
} %}

{% set activity_translations = {
    'low': __('Low', 'woodmart'),
    'moderate': __('Moderate', 'woodmart'),
    'high': __('High', 'woodmart')
} %}

{% set pet_id = item.ID %}
{% set w = weight_translations[function('get_field', 'weight', pet_id)] ?? '' %}
{% set old = old_translations[function('get_field', 'old', pet_id)] ?? '' %}
{% set act = activity_translations[function('get_field', 'activity', pet_id)] ?? '' %}

<div class="cabinet-card cabinet-card--green">
    <div class="cabinet-card__content">
        <div class="cabinet-card__pet">
            <div class="cabinet-card-pet__icon">
                <div class="cabinet-card-pet-icon__content">
                    <img src="{{ function('get_template_directory_uri') }}/gp-include/assets/lk/img/pet/mini-{{ function('get_field', 'type', pet_id) }}.png" alt="">
                </div>
            </div>
            <p class="cabinet-card-pet__name">{{ function('get_the_title', pet_id) }}</p>
        </div>

        <div class="cabinet-card__element">
            <p class="cabinet-card__label">{{ __('Breed', 'woodmart') }}:</p>
            <p class="cabinet-card__text">{{ function('get_field', 'breed', pet_id) }}</p>
        </div>
        
        <div class="cabinet-card__element">
            <p class="cabinet-card__label">{{ __('Weight', 'woodmart') }}:</p>
            <p class="cabinet-card__text">{{ w }}</p>
        </div>
        
        {% if old %}
            <div class="cabinet-card__element">
                <p class="cabinet-card__label">{{ __('Age', 'woodmart') }}:</p>
                <p class="cabinet-card__text">{{ old }}</p>
            </div>
        {% else %}
            {% set month = function('get_field', 'month', pet_id) %}
            {% set zero = month < 10 ? '0' : '' %}
            <div class="cabinet-card__element">
                <p class="cabinet-card__label">{{ __('Birhtday', 'woodmart') }}:</p>
                <p class="cabinet-card__text">
                    {{ function('get_field', 'day', pet_id) }}.{{ zero }}{{ month }}.{{ function('get_field', 'year', pet_id) }}
                </p>
            </div>
        {% endif %}
        
        <div class="cabinet-card__element">
            <p class="cabinet-card__label">{{ __('Activity', 'woodmart') }}:</p>
            <p class="cabinet-card__text">{{ act }}</p>
        </div>
        
        {% if function('get_field', 'type', pet_id) == 'cat' and function('get_field', 'sterilized', pet_id) %}
            <div class="cabinet-card__element">
                <p class="cabinet-card__label">{{ __('Sterilized', 'woodmart') }}</p>
            </div>
        {% endif %}
        
        <div class="cabinet-card__element">
            <button class="cabinet-card__button" data-edit="{{ pet_id }}">
                {{ __('Edit', 'woodmart') }}
            </button>
        </div>
    </div>
</div>

{% set months = [
    __('january', 'woodmart'),
    __('february', 'woodmart'),
    __('march', 'woodmart'),
    __('april', 'woodmart'),
    __('mail', 'woodmart'),
    __('june', 'woodmart'),
    __('july', 'woodmart'),
    __('august', 'woodmart'),
    __('september', 'woodmart'),
    __('october', 'woodmart'),
    __('november', 'woodmart'),
    __('december', 'woodmart')
] %}

<div class="modalProfile" id="pet_edit_{{ pet_id }}">
    <div class="popup-wrap">
        <div class="modal-form form__full-mobile modal-form--white modal-form--height-100-phone form-pet active">
            <button class="modal-form__close"></button>
            <p class="modal-form__title">{{ __('Edit pet', 'woodmart') }} {{ post.post_title }}</p>

            <form class="modal-form__content edit-pet-form" method="post" action="">
                <input type="hidden" name="action" value="edit_pet">
                <div class="modal-form-content__line">
                    <label class="label-name">{{ __('Pet type', 'woodmart') }}</label>
                    <div class="form-input__tabs">
                        <label class="form-input-tabs__button {{ function('get_field', 'type', post.ID) == 'cat' ? 'active' : '' }}">
                            {{ __('Dog', 'woodmart') }}
                            <input type="radio" value="cat" {{ function('get_field', 'type', post.ID) == 'cat' ? 'checked' : '' }} name="pet" class="form-input-tabs__input">
                        </label>

                        <label class="form-input-tabs__button {{ function('get_field', 'type', post.ID) == 'dog' ? 'active' : '' }}">
                            {{ __('Cat', 'woodmart') }}
                            <input type="radio" value="dog" {{ function('get_field', 'type', post.ID) == 'dog' ? 'checked' : '' }} name="pet" class="form-input-tabs__input">
                        </label>
                    </div>
                </div>

                <div class="modal-form-content__line sterilized" {{ function('get_field', 'type', post.ID) == 'dog' ? 'style="display: none;"' : '' }}>
                    <label class="label-name">{{ __('Sterilized', 'woodmart') }}</label>
                    <div class="form-input__tabs">
                        <label class="form-input-tabs__button {{ function('get_field', 'sterilized', post.ID) ? 'active' : '' }}">
                            {{ __('Yes', 'woodmart') }}
                            <input type="radio" value="1" {{ function('get_field', 'sterilized', post.ID) ? 'checked' : '' }} name="sterilized" class="form-input-tabs__input">
                        </label>

                        <label class="form-input-tabs__button {{ not function('get_field', 'sterilized', post.ID) ? 'active' : '' }}">
                            {{ __('No', 'woodmart') }}
                            <input type="radio" value="0" {{ not function('get_field', 'sterilized', post.ID) ? 'checked' : '' }} name="sterilized" class="form-input-tabs__input">
                        </label>
                    </div>
                </div>

                <div class="modal-form-content__line">
                    <div class="modal-form-content-line__element">
                        <label for="firstname" class="label-name">{{ __('Breed', 'woodmart') }}</label>
                        <input id="firstname" class="form__input" type="text" value="{{ function('get_field', 'breed', post.ID) }}" name="breed" placeholder="{{ __('Breed of your pet', 'woodmart') }}" required>
                    </div>
                </div>

                <div class="modal-form-content__line">
                    <label class="label-name">{{ __('Gender of your pet', 'woodmart') }}</label>
                    <div class="form-input__tabs">
                        <label class="form-input-tabs__button {{ function('get_field', 'sex', post.ID) == 'male' ? 'active' : '' }}">
                            {{ __('Boy', 'woodmart') }}
                            <input type="radio" value="male" {{ function('get_field', 'sex', post.ID) == 'male' ? 'checked' : '' }} name="sex" class="form-input-tabs__input">
                        </label>

                        <label class="form-input-tabs__button {{ function('get_field', 'sex', post.ID) != 'male' ? 'active' : '' }}">
                            {{ __('Girl', 'woodmart') }}
                            <input type="radio" value="female" {{ function('get_field', 'sex', post.ID) != 'male' ? 'checked' : '' }} name="sex" class="form-input-tabs__input">
                        </label>
                    </div>
                </div>

                <div class="modal-form-content__line modal-form-content__line--two">
                    <div class="modal-form-content-line__element">
                        <label class="label-name">{{ __('Type of activity', 'woodmart') }}</label>
                        <div class="form-input__list">
                            <div class="form-input-list__input">{{ act }}</div>
                            <div class="form-input-list__block-content" style="height: 0px;">
                                <div class="form-input-list__content">
                                    <label class="form-input-list__item {{ function('get_field', 'activity', post.ID) == 'low' ? 'active' : '' }}">
                                        <p class="form-input-list-item__text">{{ __('Low', 'woodmart') }}</p>
                                        <input type="radio" required name="activity" {{ function('get_field', 'activity', post.ID) == 'low' ? 'checked' : '' }} value="low" class="v-hidden">
                                        <div class="form-input-list-item__box">
                                            <div class="form-input-list-item-box__content">
                                                <img src="{{ function('get_template_directory_uri') }}/gp-include/assets/lk/img/svg/main/arrow-selected-white.svg" alt="">
                                            </div>
                                        </div>
                                    </label>
                                    <label class="form-input-list__item {{ function('get_field', 'activity', post.ID) == 'moderate' ? 'active' : '' }}">
                                        <p class="form-input-list-item__text">{{ __('Moderate', 'woodmart') }}</p>
                                        <input type="radio" required name="activity" {{ function('get_field', 'activity', post.ID) == 'moderate' ? 'checked' : '' }} value="moderate" class="v-hidden">
                                        <div class="form-input-list-item__box">
                                            <div class="form-input-list-item-box__content">
                                                <img src="{{ function('get_template_directory_uri') }}/gp-include/assets/lk/img/svg/main/arrow-selected-white.svg" alt="">
                                            </div>
                                        </div>
                                    </label>
                                    <label class="form-input-list__item {{ function('get_field', 'activity', post.ID) == 'high' ? 'active' : '' }}">
                                        <p class="form-input-list-item__text">{{ __('High', 'woodmart') }}</p>
                                        <input type="radio" required name="activity" value="high" {{ function('get_field', 'activity', post.ID) == 'high' ? 'checked' : '' }} class="v-hidden">
                                        <div class="form-input-list-item__box">
                                            <div class="form-input-list-item-box__content">
                                                <img src="{{ function('get_template_directory_uri') }}/gp-include/assets/lk/img/svg/main/arrow-selected-white.svg" alt="">
                                            </div>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-form-content-line__element">
                        <label class="label-name">{{ __('Weight', 'woodmart') }}</label>
                        <div class="form-input__list">
                            <div class="form-input-list__input">{{ w }}</div>
                            <div class="form-input-list__block-content" style="height: 0px;">
                                <div class="form-input-list__content">
                                    {% for weight, label in weight_translations %}
                                        <label class="form-input-list__item">
                                            <p class="form-input-list-item__text">{{ label }}</p>
                                            <input type="radio" required name="weight" value="{{ weight }}" {{ function('get_field', 'weight', post.ID) == weight ? 'checked' : '' }} class="v-hidden">
                                            <div class="form-input-list-item__box">
                                                <div class="form-input-list-item-box__content">
                                                    <img src="{{ function('get_template_directory_uri') }}/gp-include/assets/lk/img/svg/main/arrow-selected-white.svg" alt="">
                                                </div>
                                            </div>
                                        </label>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="rm">
                    <div class="modal-form-content__line">
                        <label class="label-name">{{ __("Pet's age", 'woodmart') }}</label>
                        <div class="form-input__tabs form-input__remote-control" data-content="modal__age">
                            <label class="form-input-tabs__button active" data-rm="0">
                                {{ __('Exemplary', 'woodmart') }}
                                <input type="radio" checked value="ex" name="old_type" required class="form-input-tabs__input">
                            </label>

                            <label class="form-input-tabs__button" data-rm="1">
                                {{ __('Exact', 'woodmart') }}
                                <input type="radio" value="acc" name="old_type" required class="form-input-tabs__input">
                            </label>
                        </div>
                    </div>

                    <div class="modal__age">
                        <div class="form-input__radio remote-control__item active" data-rmcont="0">
                            {% for age, label in old_translations %}
                                <label class="form-input-radio__item {{ function('get_field', 'old', post.ID) == age ? 'active' : '' }}">
                                    <input type="radio" name="old" value="{{ age }}" {{ function('get_field', 'old', post.ID) == age ? 'checked' : '' }} class="v-hidden">
                                    <div class="form-input-radio__circle">
                                        <div class="form-input-radio-circle__content"></div>
                                    </div>
                                    <p class="form-input-radio__title">{{ label }}</p>
                                </label>
                            {% endfor %}
                        </div>

                        <div data-rmcont="1" class="modal-form-content__line remote-control__item modal-form-content__line--three modal-form-content__line--margin-top-16">
                            <div class="modal-form-content-line__element">
                                <label for="day" class="label-name">{{ __('Day', 'woodmart') }}</label>
                                <input id="day" class="form__input form__input--center" maxlength="2" type="text" name="day" placeholder="{{ __('DD', 'woodmart') }}" value="{{ function('get_field', 'day', post.ID) }}">
                            </div>

                            <div class="modal-form-content-line__element">
                                <label class="label-name">{{ __('Month', 'woodmart') }}</label>
                                <div class="form-input__list">
                                    <div class="form-input-list__input">
                                        {% if function('get_field', 'month', post.ID) %}
                                            {{ months[function('get_field', 'month', post.ID) - 1] }}
                                        {% else %}
                                            {{ __('Month', 'woodmart') }}
                                        {% endif %}
                                    </div>
                                    <div class="form-input-list__block-content">
                                        <div class="form-input-list__content">
                                            {% for month_num, month_name in months %}
                                                <label class="form-input-list__item">
                                                    <p class="form-input-list-item__text">{{ month_name }}</p>
                                                    <input type="radio" name="month" value="{{ month_num + 1 }}" {{ function('get_field', 'month', post.ID) == (month_num + 1) ? 'checked' : '' }} class="v-hidden">
                                                    <div class="form-input-list-item__box">
                                                        <div class="form-input-list-item-box__content">
                                                            <img src="{{ function('get_template_directory_uri') }}/gp-include/assets/lk/img/svg/main/arrow-selected-white.svg" alt="">
                                                        </div>
                                                    </div>
                                                </label>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-form-content-line__element">
                                <label for="year" class="label-name">{{ __('Year', 'woodmart') }}</label>
                                <input id="year" class="form__input form__input--center" maxlength="4" type="text" name="year" placeholder="{{ __('YYYY', 'woodmart') }}" value="{{ function('get_field', 'year', post.ID) }}">
                            </div>
                        </div>
                    </div>
                </div>

                <input type="hidden" name="pet_id" value="{{ post.ID }}">
                <div class="modal-form__buttons">
                    <button class="button button--gradient button--high button--100-perc" type="submit">{{ __('Save', 'woodmart') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>