{#
This file is part of EC-CUBE
Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
http://www.ec-cube.co.jp/
For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends '@admin/default_frame.twig' %}
{% set menus = ['product', 'product_edit'] %}
{% block title %}{{ 'admin.product.product_registration'|trans }}{% endblock %}
{% block sub_title %}{{ 'admin.product.product_management'|trans }}{% endblock %}
{% form_theme form '@admin/Form/bootstrap_4_horizontal_layout.html.twig' %}
{% block javascript %}
<script>
$(document).on('drop dragover', function(e) {
e.preventDefault();
});
$(function() {
{% if has_class == false %}
if ($("#{{ form.class.stock_unlimited.vars.id }}").prop("checked")) {
$("#{{ form.class.stock.vars.id }}").attr("disabled", "disabled").val('');
} else {
$("#{{ form.class.stock.vars.id }}").removeAttr("disabled");
}
$("#{{ form.class.stock_unlimited.vars.id }}").on("click change", function() {
if ($(this).prop("checked")) {
$("#{{ form.class.stock.vars.id }}").attr("disabled", "disabled").val('');
} else {
$("#{{ form.class.stock.vars.id }}").removeAttr("disabled");
}
});
{% endif %}
// ファイルアップロード
// see https://pqina.nl/filepond/
var inputFileElement = document.querySelector('input[type=file]');
{% if eccube_config.locale == 'ja' or eccube_config.locale == 'en' %}
FilePond.setOptions(FilePondLocale_{{ eccube_config.locale }});
{% endif %}
FilePond.setOptions({
server: {
process: {
url: '{{ path('admin_product_image_process') }}',
headers: {
'ECCUBE-CSRF-TOKEN': $('meta[name="eccube-csrf-token"]').attr('content'),
'X-Requested-With': 'XMLHttpRequest'
}
},
load: {
url: '{{ path('admin_product_image_load') }}?source=',
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
},
revert: {
url: '{{ path('admin_product_image_revert') }}',
headers: {
'ECCUBE-CSRF-TOKEN': $('meta[name="eccube-csrf-token"]').attr('content'),
'X-Requested-With': 'XMLHttpRequest'
}
}
}
});
var pond = FilePond.create(inputFileElement, {
allowFileTypeValidation: true,
acceptedFileTypes: [
'image/gif',
'image/png',
'image/jpeg'
],
allowFileSizeValidation: true,
maxFileSize: 10000000,
maxFiles: 10,
allowBrowse: true,
allowDrop: true,
allowReorder: true,
labelIdle: '<i class="fa fa-cloud-upload fa-3x text-ec-lightGray mx-3 align-middle" aria-hidden="true" style="font-size: 40px"></i>{{ 'admin.common.drag_and_drop_image_description'|trans }}<span class="filepond--label-action">{{ 'admin.common.file_select'|trans }}</span>',
styleItemPanelAspectRatio: 0.5625,
// 保存されている画像のロード
files: [
{% for image in form.images %}
{
source: '{{ image.vars.value }}',
options: {
type: 'local'
}
},
{% endfor %}
// 追加してすぐの画像のロード. バリデーションエラーの場合など.
{% for add_image in form.add_images %}
{
source: '{{ add_image.vars.value }}',
options: {
type: 'local'
}
},
{% endfor %}
]
});
// 画像が追加されたら add_images にファイル名を追加する
var proto_add = '{{ form_widget(form.add_images.vars.prototype) }}';
pond.on('processfile', function(error, file) {
if (error) {
console.log(error);
} else {
$('#upload-zone').append(
$(proto_add.replace(/__name__/g, file.id))
.val(file.serverId)
.addClass('add_images')
);
}
});
// 画像が削除されたら delete_images にファイル名を追加する
var proto_del = '{{ form_widget(form.delete_images.vars.prototype) }}';
pond.on('removefile', function(error, file) {
if (error) {
console.log(error);
} else {
// file.serverId にはアップロードしたファイル名が格納される.
if (file.serverId) {
$('#upload-zone').append(
$(proto_del.replace(/__name__/g, file.id))
.val(file.serverId)
.addClass('del_images')
);
}
// 追加してすぐ削除した画像があれば削除する
$('#upload-zone').find('#admin_product_add_images_' + file.id).remove(); // 追加してすぐ削除した画像
$('#upload-zone').find('.add_images[value="' + file.filename + '"]').remove(); // 追加後, バリデーションエラーが発生した後に削除した画像
}
});
pond.on('initfile', function() {
$('#product_image_error').hide();
});
pond.on('error', function(error, file) {
var message = '{{ 'admin.common.upload_error'|trans }}';
if (error.main !== undefined) {
message = `${error.main}: ${error.sub}`;
}
$('#product_image_error')
.show()
.find('.form-error-message').text(message);
// エラーメッセージが表示されてからプレビューエリアのエラーメッセージを非表示にする
setTimeout(function() {
$('.filepond--file-status').hide();
}, 300);
});
// バリデーションエラーが出た場合に画像を保持するための hidden を追加しておく
var proto_image = '{{ form_widget(form.images.vars.prototype) }}';
{% for image in form.images %}
$('#upload-zone').append(
$(proto_image.replace(/__name__/g, '{{ loop.index0 }}'))
.val('{{ image.vars.value }}')
.addClass('images')
);
{% endfor %}
{% for add_image in form.add_images %}
$('#upload-zone').append(
$('{{ form_widget(add_image) }}')
.val('{{ add_image.vars.value }}')
.addClass('add_images')
);
{% endfor %}
{% for delete_image in form.delete_images %}
$('#upload-zone').append(
$('{{ form_widget(delete_image) }}').addClass('del_images')
);
{% endfor %}
// タグ管理
var mainTags = $('#allTags');
var adminProductTag = $('#admin_product_Tag');
$('input', adminProductTag).each(function() {
if ($(this).is(':checked')) {
$('button[data-tag-id="' + $(this).val() + '"]').removeClass('btn-outline-secondary').addClass('btn-outline-primary');
}
});
mainTags.on('click', 'button.btn', function() {
var btnTag = $(this);
var tagId = btnTag.data('tag-id');
if (btnTag.hasClass('btn-outline-primary')) {
btnTag.removeClass('btn-outline-primary').addClass('btn-outline-secondary');
$('input[value="' + tagId + '"]', mainTags).prop('checked', false);
} else {
btnTag.removeClass('btn-outline-secondary').addClass('btn-outline-primary');
$('input[value="' + tagId + '"]', mainTags).prop('checked', true);
}
});
var confirmFormChange = function(form, target, modal) {
var returnLink = form.find('input[type="hidden"][name*="return_link"]'),
saveBtn = modal.find('a[data-action="save"]'),
cancelBtn = modal.find('a[data-action="cancel"]');
modal.on('hidden.bs.modal', function() {
returnLink.val('');
});
saveBtn.on('click', function() {
returnLink.val($(this).data('return-link'));
$(this).addClass('disabled');
form.submit();
});
target.on('click', function() {
modal.find('.modal-body .screen-name').text($(this).attr('title'));
modal.modal('show');
saveBtn.data('return-link', $(this).attr('href'));
cancelBtn.attr('href', $(this).attr('href'));
return false;
});
};
confirmFormChange($('#form1'), $('a[data-action="confirm"]'), $('#confirmFormChangeModal'))
});
// searchWordの実行
$('#search-category').on('input', function () {
searchWord($(this).val(), $('.category-li'));
});
</script>
{% endblock javascript %}
{% block main %}
<!-- 移動確認モーダル-->
<div class="modal fade" id="confirmFormChangeModal" tabindex="-1" role="dialog"
aria-labelledby="confirmFormChangeModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ 'admin.common.move_to_confirm_title'|trans }}</h5>
<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<p class="screen-name"></p>
</div>
<div class="modal-footer">
<a class="btn btn-ec-conversion" data-action="save" href="javascript:void(0)">
{{ 'admin.common.move_to_confirm_save_and_move'|trans }}
</a>
<a class="btn btn-ec-sub" data-action="cancel" href="javascript:void(0)">
{{ 'admin.common.move_to_confirm_move_only'|trans }}
</a>
</div>
</div>
</div>
</div>
<form role="form" name="form1" id="form1" method="post" action="" novalidate enctype="multipart/form-data">
{{ form_widget(form._token) }}
{{ form_widget(form.return_link) }}
<div class="c-contentsArea__cols">
<div class="c-contentsArea__primaryCol">
<div class="c-primaryCol">
<div class="card rounded border-0 mb-4">
<div class="card-header">
<div class="row">
<div class="col-8">
<div class="d-inline-block">
<span class="card-title">
{{ 'admin.product.product__card_title'|trans }}
</span>
</div>
</div>
<div class="col-4 text-end">
<a data-bs-toggle="collapse" href="#basicConfig" aria-expanded="false"
aria-controls="basicConfig">
<i class="fa fa-angle-up fa-lg"></i>
</a>
</div>
</div>
</div>
<div class="collapse show ec-cardCollapse" id="basicConfig">
<div class="card-body">
{% if Product.id %}
<div class="row">
<div class="col-3">
<div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'tooltip.product.product_id'|trans }}">
<span>{{ 'admin.product.product_id'|trans }}</span>
<i class="fa fa-question-circle fa-lg ms-1"></i>
</div>
</div>
<div class="col">
<p>{{ Product.id }}</p>
</div>
</div>
{% endif %}
<div class="row">
<div class="col-3">
<div class="d-inline-block">
<span>{{ 'admin.product.name'|trans }}</span>
<span class="badge bg-primary ms-1">
{{ 'admin.common.required'|trans }}
</span>
</div>
</div>
<div class="col mb-2">
{{ form_widget(form.name) }}
{{ form_errors(form.name) }}
</div>
</div>
{% if has_class == false %}
<div class="row">
<div class="col-3">
<div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'tooltip.product.sale_type'|trans }}">
<span>{{ 'admin.product.sale_type'|trans }}</span>
<i class="fa fa-question-circle fa-lg ms-1"></i>
<span class="badge bg-primary ms-1">
{{ 'admin.common.required'|trans }}
</span>
</div>
</div>
<div class="col mb-2">
{{ form_widget(form.class.sale_type) }}
</div>
</div>
{% endif %}
<div class="row">
<div class="col-3">
<div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'tooltip.product.image'|trans }}">
<span>{{ 'admin.product.image'|trans }}</span>
<i class="fa fa-question-circle fa-lg ms-1"></i>
<br>{{ 'admin.product.image_size'|trans }}
</div>
</div>
<div class="col mb-2">
<p id="message"></p>
<div id="upload-zone" class="rounded">
{{ form_widget(form.product_image, { attr : { style : 'display:none;' } }) }}
{{ form_errors(form.product_image) }}
</div><!-- /#upload-zone -->
<span class="invalid-feedback" id="product_image_error" style="display: none">
<span class="d-block">
<span class="form-error-icon badge bg-danger text-uppercase">{{ 'Error'|trans({}, 'validators') }}</span>
<span class="form-error-message"></span>
</span>
</span>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top"
title="{{ 'tooltip.product.description_detail'|trans }}">
<span>{{ 'admin.product.description_detail'|trans }}</span>
<i class="fa fa-question-circle fa-lg ms-1"></i>
</div>
</div>
<div class="col">
{{ form_widget(form.description_detail, { attr : { rows : "8"} }) }}
{{ form_errors(form.description_detail) }}
<div class="d-inline-block mb-2" data-bs-toggle="collapse" href="#addComment"
role="button" aria-expanded="false" aria-controls="addComment">
<a>
<i class="fa fa-plus-square-o fw-bold me-1"></i>
<span class="fw-bold text-ec-black">
{{ 'admin.product.description_list__add'|trans }}
</span>
</a>
</div>
</div>
</div>
<div class="collapse ec-collapse" id="addComment">
<div class="row bg-ec-formGray pt-3 mb-2">
<div class="col-3">
<div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top"
title="{{ 'tooltip.product.description_list'|trans }}">
<span>{{ 'admin.product.description_list'|trans }}</span>
<i class="fa fa-question-circle fa-lg ms-1"></i>
</div>
</div>
<div class="col mb-4">
<div>
{{ form_widget(form.description_list, { attr : { rows : "4"} }) }}
{{ form_errors(form.description_list) }}
</div>
</div>
</div>
</div>
{% if has_class == false %}
<div class="row">
<div class="col-3">
<div class="d-inline-block">
<span>{{ 'admin.product.sale_price'|trans }}</span>
<span class="badge bg-primary ms-1">
{{ 'admin.common.required'|trans }}
</span>
</div>
</div>
<div class="col mb-2">
<div>
{{ form_widget(form.class.price02) }}
{{ form_errors(form.class.price02) }}
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top"
title="{{ 'tooltip.product.normal_price'|trans }}">
<span>{{ 'admin.product.normal_price'|trans }}</span>
<i class="fa fa-question-circle fa-lg ms-1"></i>
</div>
</div>
<div class="col mb-2">
<div>
{{ form_widget(form.class.price01) }}
{{ form_errors(form.class.price01) }}
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="d-inline-block">
<span>{{ 'admin.product.stock'|trans }}</span>
<span class="badge bg-primary ms-1">
{{ 'admin.common.required'|trans }}
</span>
</div>
</div>
<div class="col">
<div>
{{ form_widget(form.class.stock) }}
{{ form_errors(form.class.stock) }}
{# TODO: form_layoutの調整 #}
{#<div class="form-check mb-2">#}
{#<input class="form-check-input"#}
{#id="{{ form.class.stock_unlimited.vars.id }}"#}
{#name="{{ form.class.stock_unlimited.vars.full_name }}"#}
{#type="checkbox"#}
{#value="{{ form.class.stock_unlimited.vars.value }}">#}
{#<label class="form-check-label"#}
{#for="{{ form.class.stock_unlimited.vars.id }}">#}
{#{{ 'admin.product.product.stock_unlimited'|trans }}#}
{#</label>#}
{#</div>#}
{{ form_widget(form.class.stock_unlimited) }}
{{ form_errors(form.class.stock_unlimited) }}
</div>
</div>
</div>
{% endif %}
<div class="row">
<div class="col-3">
<div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top"
title="{{ 'tooltip.product.search_word'|trans }}">
<span>{{ 'admin.product.search_word'|trans }}</span>
<i class="fa fa-question-circle fa-lg ms-1"></i>
</div>
</div>
<div class="col mb-2">
<div>
{{ form_widget(form.search_word) }}
{{ form_errors(form.search_word) }}
</div>
</div>
</div>
{% if has_class == false %}
<div class="row">
<div class="col-3">
<div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top"
title="{{ 'tooltip.product.product_code'|trans }}">
<span>{{ 'admin.product.product_code'|trans }}</span>
<i class="fa fa-question-circle fa-lg ms-1"></i>
</div>
</div>
<div class="col mb-2">
<div>
{{ form_widget(form.class.code) }}
{{ form_errors(form.class.code) }}
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top"
title="{{ 'tooltip.product.sale_limit'|trans }}">
<span>{{ 'admin.product.sale_limit'|trans }}</span>
<i class="fa fa-question-circle fa-lg ms-1"></i>
</div>
</div>
<div class="col mb-2">
<div>
{{ form_widget(form.class.sale_limit) }}
{{ form_errors(form.class.sale_limit) }}
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top"
title="{{ 'tooltip.product.delivery_duration'|trans }}">
<span>{{ 'admin.product.delivery_duration'|trans }}</span>
<i class="fa fa-question-circle fa-lg ms-1"></i>
</div>
</div>
<div class="col mb-2">
<div>
{{ form_widget(form.class.delivery_duration) }}
{{ form_errors(form.class.delivery_duration) }}
</div>
</div>
</div>
{% if BaseInfo.option_product_delivery_fee %}
<div class="row">
<div class="col-3">
<div class="d-inline-block">
<span>{{ 'admin.product.delivery_fee'|trans }}</span>
</div>
</div>
<div class="col mb-2">
<div>
{{ form_widget(form.class.delivery_fee) }}
{{ form_errors(form.class.delivery_fee) }}
</div>
</div>
</div>
{% endif %}
{% if BaseInfo.option_product_tax_rule %}
<div class="row">
<div class="col-3">
<div class="d-inline-block">
<span>{{ 'admin.product.tax_rate'|trans }}</span>
</div>
</div>
<div class="col mb-2">
<div>
{{ form_widget(form.class.tax_rate) }}
{{ form_errors(form.class.tax_rate) }}
</div>
</div>
</div>
{% endif %}
{% endif %}
{# エンティティ拡張の自動出力 #}
{% for f in form|filter(f => f.vars.eccube_form_options.auto_render) %}
{% if f.vars.eccube_form_options.form_theme %}
{% form_theme f f.vars.eccube_form_options.form_theme %}
{{ form_row(f) }}
{% else %}
<div class="row">
<div class="col-3">
<span>{{ f.vars.label|trans }}</span>
</div>
<div class="col mb-2">
<div>
{{ form_widget(f) }}
{{ form_errors(f) }}
</div>
</div>
</div>
{% endif %}
{% endfor %}
{% if has_class == false %}
{% for f in form.class|filter(f => f.vars.eccube_form_options.auto_render) %}
{% if f.vars.eccube_form_options.form_theme %}
{% form_theme f f.vars.eccube_form_options.form_theme %}
{{ form_row(f) }}
{% else %}
<div class="row">
<div class="col-3">
<span>{{ f.vars.label|trans }}</span>
</div>
<div class="col mb-2">
<div>
{{ form_widget(f) }}
{{ form_errors(f) }}
</div>
</div>
</div>
{% endif %}
{% endfor %}
{% endif %}
</div>
</div>
</div>
{% if id is not null %}
<div class="card rounded border-0 mb-4">
<div class="card-header">
<div class="row">
<div class="col-8">
<div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top"
title="{{ 'tooltip.product.product_class'|trans }}">
<span class="card-title">
{{ 'admin.product.product_class__card_title'|trans }}
<i class="fa fa-question-circle fa-lg ms-1"></i>
</span>
</div>
</div>
<div class="col-4 text-end">
<a data-bs-toggle="collapse" href="#standardConfig" aria-expanded="false"
aria-controls="standardConfig">
<i class="fa fa-angle-up fa-lg"></i>
</a>
</div>
</div>
</div>
<div class="collapse show ec-cardCollapse" id="standardConfig">
<div class="card-body">
{% if has_class == true %}
<table class="table table-striped">
<thead class="table-active">
<th class="ps-3 pt-2 pb-2">{{ 'admin.product.class_category1__short'|trans }}</th>
<th class="pt-2 pb-2">{{ 'admin.product.class_category2__short'|trans }}</th>
<th class="pt-2 pb-2">{{ 'admin.product.product_code__short'|trans }}</th>
<th class="pt-2 pb-2">{{ 'admin.product.stock'|trans }}</th>
<th class="pe-3 pt-2 pb-2">{{ 'admin.product.price'|trans }}</th>
</thead>
<tbody>
{% for Class in Product.ProductClasses %}
{% if Class.visible == 1 %}
<tr>
<td class="ps-3">{% if Class.hasClassCategory1 %}{{ Class.ClassCategory1.name }}{% endif %}</td>
<td>{% if Class.hasClassCategory2 %}{{ Class.ClassCategory2.name }}{% endif %}</td>
<td>{{ Class.code }}</td>
<td>{% if Class.stock_unlimited %}{{ 'admin.product.stock_unlimited__short'|trans }}{% else %}{{ Class.stock }}{% endif %}</td>
<td class="pe-3">{{ Class.price02|price }}</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
{% endif %}
<div class="d-block text-center text-center">
<a href="{{ path('admin_product_product_class', { 'id' : id }) }}" class="btn btn-ec-regular" data-action="confirm"
title="{{ 'admin.common.move_to_confirm_message'|trans({
'%name%' : 'admin.product.product_class_registration'|trans
}) }}">{{ 'admin.product.product_class__confirm_of_product'|trans }}</a>
</div>
</div>
</div>
</div>
{% endif %}
<div class="card rounded border-0 mb-4">
<div class="card-header">
<div class="row">
<div class="col-8">
<div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top"
title="{{ 'tooltip.product.free_area'|trans }}">
<span class="card-title">{{ 'admin.product.free_area__card_title'|trans }}</span>
<i class="fa fa-question-circle fa-lg ms-1"></i>
</div>
</div>
<div class="col-4 text-end">
<a data-bs-toggle="collapse" href="#freeArea" aria-expanded="false"
aria-controls="freeArea">
<i class="fa fa-angle-up fa-lg"></i>
</a>
</div>
</div>
</div>
<div class="collapse show ec-cardCollapse" id="freeArea">
<div class="card-body">
<div class="row">
<div class="col-3">
<span>{{ 'admin.product.free_area'|trans }}</span>
</div>
<div class="col-9">
<div>
{{ form_widget(form.free_area, {id: 'wysiwyg-area', attr : { rows : "8"} }) }}
{{ form_errors(form.free_area) }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-contentsArea__secondaryCol">
<div class="c-secondaryCol">
{% if id is not null %}
<div class="card rounded border-0 mb-4">
<div class="collapse show ec-cardCollapse" id="preview">
<div class="card-body">
<div class="d-block text-center">
<a class="btn w-100 btn-ec-regular"
target="_blank"
href="{{ url('product_detail', {id:id}) }}"
title="{{ 'admin.product.preview'|trans }}">{{ 'admin.product.preview'|trans }}</a>
</div>
</div>
</div>
</div>
{% endif %}
<div class="card rounded border-0 mb-4">
<div class="card-header">
<div class="row">
<div class="col-8">
<div class="d-inline-block">
<span class="card-title">{{ 'admin.product.category__product_card_title'|trans }}</span>
</div>
</div>
<div class="col-4 text-end">
<a data-bs-toggle="collapse" href="#category" aria-expanded="false"
aria-controls="category">
<i class="fa fa-angle-up fa-lg"></i>
</a>
</div>
</div>
</div>
<div class="collapse show ec-cardCollapse" id="category">
<div class="card-body">
<div class="mb-3">
<div class="row">
<div class="col">
<div class="input-group">
<div class="input-group-text">
<span id="basic-addon1">
<i class="fa fa-search"></i>
</span>
</div>
<input id="search-category" class="form-control" type="search"
placeholder="{{ 'admin.product.search_category'|trans }}"
aria-label="Search">
</div>
</div>
</div>
</div>
{% macro tree(ChoicedIds, Category, form) %}
{% import _self as selfMacro %}
<li class="c-directoryTree--registerItem category-li">
<input type="checkbox" id="admin_product_category_{{ Category.id }}" name="admin_product[Category][]" value="{{ Category.id }}" {% if Category.id in ChoicedIds %}checked{% endif %}>
<label for="admin_product_category_{{ Category.id }}">{{ Category.name }}</label>
<ul class="list-unstyled">
{% for child,ChildCategory in Category.children %}
{{ selfMacro.tree(ChoicedIds, ChildCategory, form) }}
{% endfor %}
</ul>
</li>
{% endmacro %}
<div class="c-directoryTree--register rounded border mb-3 p-3">
{% import _self as renderMacro %}
{% for TopCategory in TopCategories %}
<ul class="list-unstyled">
{{ renderMacro.tree(ChoicedCategoryIds, TopCategory, form.Category) }}
</ul>
{% endfor %}
{{ form_errors(form.Category) }}
</div>
<div class="d-block text-center">
<a class="btn w-100 btn-ec-regular"
data-action="confirm"
href="{{ path('admin_product_category') }}"
title="{{ 'admin.common.move_to_confirm_message'|trans({
'%name%' : 'admin.product.category_management'|trans}) }}">{{ 'admin.product.move_to_category'|trans }}</a>
</div>
</div>
</div>
</div>
<div class="card rounded border-0 mb-4">
<div class="card-header">
<div class="row">
<div class="col-8">
<div class="d-inline-block">
<span class="card-title">
{{ 'admin.product.tag__product_card_title'|trans }}
</span>
</div>
</div>
<div class="col-4 text-end">
<a data-bs-toggle="collapse" href="#tag" aria-expanded="false" aria-controls="tag">
<i class="fa fa-angle-up fa-lg"></i>
</a>
</div>
</div>
</div>
<div class="collapse show ec-cardCollapse" id="tag">
<div class="card-body">
{% if(Tags|length > 0) %}
{% for Tag in Tags %}
<div class="d-inline-block mb-2 me-2">
<button class="btn btn-outline-primary" type="button">{{ Tag.name }}</button>
</div>
{% endfor %}
{% endif %}
<div class="d-block mb-3" data-bs-toggle="collapse" href="#allTags" role="button"
aria-expanded="false" aria-controls="allTags">
<a>
<i class="fa fa-plus-square-o fw-bold me-1"></i>
<span class="fw-bold">{{ 'admin.product.save_tag'|trans }}</span>
</a>
</div>
<div class="collapse p-3 bg-ec-lightGray mb-3 ec-collapse" id="allTags">
<div class="d-none">
{{ form_widget(form.Tag) }}
</div>
{% if(TagsList|length > 0) %}
{% for Tag in TagsList %}
<div class="d-inline-block mb-2 me-2">
<button class="btn btn-outline-secondary" type="button"
data-tag-id="{{ Tag.id }}">{{ Tag.name }}</button>
</div>
{% endfor %}
{% endif %}
<div class="d-block mb-3" data-bs-toggle="collapse" href="#allTags" role="button"
aria-expanded="false" aria-controls="allTags"></div>
</div>
<div class="d-block text-center">
<a href="{{ path('admin_product_tag') }}"
class="btn w-100 btn-ec-regular"
data-action="confirm"
title="{{ 'admin.common.move_to_confirm_message'|trans({
'%name%' : 'admin.product.tag_management'|trans }) }}">{{ 'admin.product.move_to_tag'|trans }}</a>
</div>
</div>
</div>
</div>
<div class="card rounded border-0 mb-4">
<div class="card-header">
<div class="row">
<div class="col-8">
<span class="card-title">{{ 'admin.product.create_date__card_title'|trans }}</span>
</div>
<div class="col-4 text-end">
<a data-bs-toggle="collapse" href="#update" aria-expanded="false"
aria-controls="update">
<i class="fa fa-angle-up fa-lg"></i>
</a>
</div>
</div>
</div>
<div class="collapse show ec-cardCollapse" id="update">
<div class="card-body">
<div class="row mb-2">
<div class="col">
<i class="fa fa-flag me-1"></i>
<span>{{ 'admin.common.create_date'|trans }}</span>
</div>
<div class="col">
<span>:{{ Product.create_date|date_min }}</span>
</div>
</div>
<div class="row mb-2">
<div class="col">
<i class="fa fa-refresh me-1"></i>
<span>{{ 'admin.common.update_date'|trans }}</span>
</div>
<div class="col">
<span>:{{ Product.update_date|date_min }}</span>
</div>
</div>
<div class="row mb-2">
<div class="col">
<i class="fa fa-user me-1"></i>
<span>{{ 'admin.common.last_updater'|trans }}</span>
</div>
<div class="col">
<span>:{{ Product.Creator ? Product.Creator.name }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="card rounded border-0 mb-4">
<div class="card-header">
<div class="row">
<div class="col-8">
<div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top"
title="{{ 'tooltip.product.shop_memo'|trans }}">
<span class="card-title">
{{ 'admin.common.shop_memo'|trans }}
<i class="fa fa-question-circle fa-lg ms-1"></i>
</span>
</div>
</div>
<div class="col-4 text-end">
<a data-bs-toggle="collapse" href="#shopMemo" aria-expanded="false"
aria-controls="shopMemo">
<i class="fa fa-angle-up fa-lg"></i>
</a>
</div>
</div>
</div>
<div class="collapse show ec-cardCollapse" id="shopMemo">
<div class="card-body">
{{ form_widget(form.note, { attr : { rows : "8"} }) }}
{{ form_errors(form.note) }}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-conversionArea">
<div class="c-conversionArea__container">
<div class="row justify-content-between align-items-center">
<div class="col-6">
<div class="c-conversionArea__leftBlockItem">
<a class="c-baseLink" href="{{ path('admin_product_page', { page_no : app.session.get('eccube.admin.product.search.page_no')|default('1') } ) }}"
data-action="confirm" title="{{ 'admin.common.move_to_confirm_message'|trans({'%name%' : 'admin.product.product_list'|trans }) }}">
<i class="fa fa-backward" aria-hidden="true"></i><span>{{ 'admin.product.product_list'|trans }}</span>
</a>
</div>
</div>
<div class="col-6">
<div id="ex-conversion-action" class="row align-items-center justify-content-end">
<div class="col-auto">
{{ form_widget(form.Status) }}
{{ form_errors(form.Status) }}
</div>
<div class="col-auto">
<button class="btn btn-ec-conversion px-5" type="submit">{{ 'admin.common.registration'|trans }}</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
{% endblock %}