mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-29 07:09:48 +03:00
3d16b95e0f
refs https://github.com/TryGhost/Team/issues/840 We wanted to switch to a settings menu that stays open to the right of the editor rather than a popover that blocks all other interaction with the post to solve two use-cases: 1. when editing it's fairly common to select some text from the post contents when setting excerpt and meta data text, with the previous design not letting you scroll or select whilst the menu got in the way of that 2. having the menu open with meta data visible before publishing can help you see everything is set as you want and help you feel confident when publishing/sending content --- - removed `psmRedesign` labs flag - swapped labs component/css for main component and deleted labs component - cleaned up now-unused `ui.showSettingsMenu` property and related actions/classes
468 lines
30 KiB
Handlebars
468 lines
30 KiB
Handlebars
<div
|
||
class="settings-menu-container {{if (and this.isViewingSubview (not (eq this.subview "email-settings"))) "settings-menu-container-wide"}}"
|
||
{{did-insert this.setSidebarWidthFromElement}}
|
||
{{did-update this.setSidebarWidthFromElement this.isViewingSubview}}
|
||
>
|
||
<div id="entry-controls">
|
||
<div class="settings-menu settings-menu-pane settings-menu-pane-main">
|
||
<div class="settings-menu-header">
|
||
<h4>{{capitalize this.post.displayName}} settings</h4>
|
||
</div>
|
||
<div class="settings-menu-content">
|
||
<form>
|
||
<div class="form-group">
|
||
<label for="url">{{capitalize this.post.displayName}} URL</label>
|
||
{{!-- new posts don't have a preview link --}}
|
||
{{#unless this.post.isNew}}
|
||
{{#if this.post.isPublished}}
|
||
<a class="post-view-link" target="_blank" href="{{this.post.url}}">
|
||
View {{this.post.displayName}} {{svg-jar "external"}}
|
||
</a>
|
||
{{else if this.post.isScheduled}}
|
||
<a class="post-view-link" target="_blank" href="{{this.post.previewUrl}}">
|
||
Preview {{svg-jar "external"}}
|
||
</a>
|
||
{{/if}}
|
||
{{/unless}}
|
||
|
||
<div class="gh-input-icon gh-icon-link">
|
||
{{svg-jar "link"}}
|
||
<GhTextInput
|
||
@class="post-setting-slug"
|
||
@id="url"
|
||
@name="post-setting-slug"
|
||
@value={{readonly this.slugValue}}
|
||
@input={{action (mut this.slugValue) value="target.value"}}
|
||
@focus-out={{action "updateSlug" this.slugValue}}
|
||
@stopEnterKeyDownPropagation={{true}} />
|
||
</div>
|
||
<GhUrlPreview @slug={{this.slugValue}} @tagName="p" @classNames="description" />
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
{{#if (or this.post.isDraft this.post.isPublished this.post.pastScheduledTime)}}
|
||
<label>Publish date</label>
|
||
{{else}}
|
||
<label>Scheduled date</label>
|
||
{{/if}}
|
||
<GhDateTimePicker
|
||
@date={{this.post.publishedAtBlogDate}}
|
||
@time={{this.post.publishedAtBlogTime}}
|
||
@setDate={{action "setPublishedAtBlogDate"}}
|
||
@setTime={{action "setPublishedAtBlogTime"}}
|
||
@errors={{this.post.errors}}
|
||
@dateErrorProperty="publishedAtBlogDate"
|
||
@timeErrorProperty="publishedAtBlogTime"
|
||
@maxDate="now"
|
||
@disabled={{this.post.isScheduled}}
|
||
@isActive={{and this.showSettingsMenu (not this.isViewingSubview)}}
|
||
/>
|
||
{{#unless (or this.post.isDraft this.post.isPublished this.post.pastScheduledTime)}}
|
||
<p>Use the publish menu to re-schedule</p>
|
||
{{/unless}}
|
||
</div>
|
||
|
||
{{#unless this.session.user.isContributor}}
|
||
<div class="form-group">
|
||
<label for="tag-input">Tags</label>
|
||
<GhPsmTagsInput @post={{this.post}} @triggerId="tag-input" />
|
||
</div>
|
||
{{/unless}}
|
||
|
||
|
||
{{#if this.showVisibilityInput}}
|
||
{{#if (feature "multipleProducts")}}
|
||
<GhFormGroup @errors={{this.post.errors}} @hasValidated={{this.post.hasValidated}} @property="visibility">
|
||
<label for="visibility-input">Post access</label>
|
||
<div
|
||
class="gh-radio {{if this.post.isPublic "active"}}"
|
||
{{on "click" (action "setVisibility" "public")}}
|
||
>
|
||
<div class="gh-radio-button"></div>
|
||
<div class="gh-radio-content">
|
||
<div class="gh-radio-label">Public</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="gh-radio {{if (not this.post.isPublic) "active"}}"
|
||
{{on "click" (action "setVisibility" this.post.visibilitySegment)}}
|
||
>
|
||
<div class="gh-radio-button"></div>
|
||
<div class="gh-radio-content">
|
||
<div class="gh-radio-label">Members-only</div>
|
||
<div class="gh-radio-desc">
|
||
<GhMembersSegmentSelect
|
||
@hideLabels={{true}}
|
||
@segment={{this.post.visibilitySegment}}
|
||
@onChange={{action "setVisibility"}}
|
||
@renderInPlace={{true}}
|
||
@hideOptionsWhenAllSelected={{true}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<GhErrorMessage @errors={{this.post.errors}} @property="visibility" class="no-selection" data-test-error="visibility" />
|
||
</GhFormGroup>
|
||
{{else}}
|
||
<div class="form-group">
|
||
<label for="visibility-input">Post access</label>
|
||
<GhPsmVisibilityInput @post={{this.post}} @triggerId="visibility-input" />
|
||
</div>
|
||
{{/if}}
|
||
{{/if}}
|
||
|
||
|
||
<GhFormGroup @errors={{this.post.errors}} @hasValidated={{this.post.hasValidated}} @property="customExcerpt">
|
||
<label for="custom-excerpt">Excerpt</label>
|
||
<GhTextarea
|
||
@class="post-setting-custom-excerpt"
|
||
@id="custom-excerpt"
|
||
@name="post-setting-custom-excerpt"
|
||
@value={{readonly this.customExcerptScratch}}
|
||
@input={{action (mut this.customExcerptScratch) value="target.value"}}
|
||
@focus-out={{action "setCustomExcerpt" this.customExcerptScratch}}
|
||
@stopEnterKeyDownPropagation="true"
|
||
data-test-field="custom-excerpt"
|
||
/>
|
||
<GhErrorMessage @errors={{this.post.errors}} @property="customExcerpt" data-test-error="custom-excerpt" />
|
||
</GhFormGroup>
|
||
|
||
{{#unless this.session.user.isAuthorOrContributor}}
|
||
<GhFormGroup @class="for-select" @errors={{this.post.errors}} @hasValidated={{this.post.hasValidated}} @property="authors" data-test-input="authors">
|
||
<label for="author-list">Authors</label>
|
||
<GhPsmAuthorsInput @selectedAuthors={{this.post.authors}} @updateAuthors={{action "changeAuthors"}} @triggerId="author-list" />
|
||
<GhErrorMessage @errors={{this.post.errors}} @property="authors" data-test-error="authors" />
|
||
</GhFormGroup>
|
||
{{/unless}}
|
||
|
||
<ul class="nav-list nav-list-block">
|
||
<li class="nav-list-item" {{action "showSubview" "meta-data"}} data-test-button="meta-data">
|
||
<button type="button">
|
||
<b>Meta data</b>
|
||
<span>Extra content for search engines</span>
|
||
</button>
|
||
{{svg-jar "arrow-right"}}
|
||
</li>
|
||
<li class="nav-list-item" {{action "showSubview" "twitter-data"}} data-test-button="twitter-data">
|
||
<button type="button">
|
||
<b>Twitter card</b>
|
||
<span>Customize structured data for Twitter</span>
|
||
</button>
|
||
{{svg-jar "arrow-right"}}
|
||
</li>
|
||
<li class="nav-list-item" {{action "showSubview" "facebook-data"}} data-test-button="facebook-data">
|
||
<button type="button">
|
||
<b>Facebook card</b>
|
||
<span>Customize Open Graph data</span>
|
||
</button>
|
||
{{svg-jar "arrow-right"}}
|
||
</li>
|
||
{{#if (and this.post.isPost showEmailNewsletter)}}
|
||
<li class="nav-list-item" {{action "showSubview" "email-settings"}} data-test-button="email-settings">
|
||
<button type="button">
|
||
<b>Email newsletter</b>
|
||
<span>Customize email settings</span>
|
||
</button>
|
||
{{svg-jar "arrow-right"}}
|
||
</li>
|
||
{{/if}}
|
||
<li class="nav-list-item" {{action "showSubview" "codeinjection"}} data-test-button="codeinjection">
|
||
<button type="button">
|
||
<b>Code injection</b>
|
||
<span>Add styles/scripts to the header & footer</span>
|
||
</button>
|
||
{{svg-jar "arrow-right"}}
|
||
</li>
|
||
</ul>
|
||
|
||
{{#unless this.session.user.isAuthorOrContributor}}
|
||
<div class="form-group for-checkbox">
|
||
<label class="checkbox" for="featured" {{action "toggleFeatured" bubbles="false"}}>
|
||
<input
|
||
type="checkbox"
|
||
checked={{this.post.featured}}
|
||
class="gh-input post-settings-featured"
|
||
onclick={{action (mut this.post.featured) value="target.checked"}}
|
||
data-test-checkbox="featured"
|
||
>
|
||
<span class="input-toggle-component"></span>
|
||
<p>Feature this {{this.post.displayName}}</p>
|
||
</label>
|
||
</div>
|
||
{{/unless}}
|
||
|
||
<GhPsmTemplateSelect
|
||
@post={{this.post}}
|
||
@onTemplateSelect={{action (mut this.post.customTemplate)}} />
|
||
|
||
{{#unless this.post.isNew}}
|
||
<button type="button" class="gh-btn gh-btn-hover-red gh-btn-icon settings-menu-delete-button" {{action "deletePost"}}><span>{{svg-jar "trash"}} Delete {{this.post.displayName}}</span></button>
|
||
{{/unless}}
|
||
|
||
</form>
|
||
</div>{{! .settings-menu-content }}
|
||
</div>{{! .post-settings-menu }}
|
||
|
||
{{#if this.isViewingSubview}}
|
||
<div class="settings-menu settings-menu-pane {{unless (eq this.subview "email-settings") "settings-menu-pane-wide"}}">
|
||
<div class="active">
|
||
{{#if (eq this.subview "meta-data")}}
|
||
<div class="settings-menu-header subview">
|
||
<button aria-label="Back" {{action "closeSubview"}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
|
||
<h4>Meta data</h4>
|
||
<div style="width:23px;"></div>
|
||
</div>
|
||
|
||
<div class="settings-menu-content">
|
||
<form {{action "discardEnter" on="submit"}}>
|
||
<GhFormGroup @errors={{this.post.errors}} @hasValidated={{this.post.hasValidated}} @property="metaTitle">
|
||
<label for="meta-title">Meta title</label>
|
||
<GhTextInput
|
||
@class="post-setting-meta-title"
|
||
@id="meta-title"
|
||
@name="post-setting-meta-title"
|
||
@placeholder={{this.seoTitle}}
|
||
@value={{readonly this.metaTitleScratch}}
|
||
@input={{action (mut this.metaTitleScratch) value="target.value"}}
|
||
@focus-out={{action "setMetaTitle" this.metaTitleScratch}}
|
||
@stopEnterKeyDownPropagation={{true}}
|
||
data-test-field="meta-title" />
|
||
<p>Recommended: <b>60</b> characters. You’ve used {{gh-count-down-characters this.metaTitleScratch 60}}</p>
|
||
<GhErrorMessage @errors={{this.post.errors}} @property="meta-title" />
|
||
</GhFormGroup>
|
||
|
||
<GhFormGroup @errors={{this.post.errors}} @hasValidated={{this.post.hasValidated}} @property="metaDescription">
|
||
<label for="meta-description">Meta description</label>
|
||
<GhTextarea
|
||
@class="post-setting-meta-description"
|
||
@id="meta-description"
|
||
@name="post-setting-meta-description"
|
||
@placeholder={{truncate this.seoDescription 150}}
|
||
@value={{readonly this.metaDescriptionScratch}}
|
||
@input={{action (mut this.metaDescriptionScratch) value="target.value"}}
|
||
@focus-out={{action "setMetaDescription" this.metaDescriptionScratch}}
|
||
@stopEnterKeyDownPropagation="true"
|
||
data-test-field="meta-description" />
|
||
<p>Recommended: <b>145</b> characters. You’ve used {{gh-count-down-characters this.metaDescriptionScratch 145}}</p>
|
||
<GhErrorMessage @errors={{this.post.errors}} @property="meta-description" />
|
||
</GhFormGroup>
|
||
|
||
<GhFormGroup @errors={{this.post.errors}} @hasValidated={{this.post.hasValidated}} @property="canonicalUrl">
|
||
<label for="canonicalUrl">Canonical URL</label>
|
||
<GhTextInput
|
||
@class="post-setting-canonicalUrl"
|
||
@name="post-setting-canonicalUrl"
|
||
@value={{readonly this.canonicalUrlScratch}}
|
||
@input={{action (mut this.canonicalUrlScratch) value="target.value"}}
|
||
@focus-out={{action "setCanonicalUrl" this.canonicalUrlScratch}}
|
||
@stopEnterKeyDownPropagation="true"
|
||
data-test-field="canonicalUrl" />
|
||
<GhErrorMessage @errors={{this.post.errors}} @property="canonicalUrl" />
|
||
</GhFormGroup>
|
||
|
||
<div class="form-group">
|
||
<label>Search Engine Result Preview</label>
|
||
<div class="gh-seo-container">
|
||
<div class="gh-seo-preview">
|
||
<div class="flex mb7">
|
||
{{svg-jar "google"}}
|
||
<div class="gh-seo-search-bar">{{svg-jar "google-search"}}</div>
|
||
</div>
|
||
<div class="gh-seo-preview-link">{{this.seoURL}}</div>
|
||
<div class="gh-seo-preview-title">{{truncate this.seoTitle 60}}</div>
|
||
<div class="gh-seo-preview-desc">{{moment-format (now) "DD MMM YYYY"}} — {{truncate this.seoDescription 149}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
{{/if}}
|
||
|
||
{{#if (eq this.subview "twitter-data")}}
|
||
<div class="settings-menu-header subview">
|
||
<button aria-label="Back" {{action "closeSubview"}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
|
||
<h4>Twitter card</h4>
|
||
<div style="width:23px;"></div>
|
||
</div>
|
||
|
||
<div class="settings-menu-content">
|
||
|
||
<form {{action "discardEnter" on="submit"}}>
|
||
<GhImageUploaderWithPreview
|
||
@image={{this.post.twitterImage}}
|
||
@text="Add Twitter image"
|
||
@allowUnsplash={{true}}
|
||
@update={{action "setTwitterImage"}}
|
||
@remove={{action "clearTwitterImage"}}
|
||
/>
|
||
<GhFormGroup @errors={{this.post.errors}} @hasValidated={{this.post.hasValidated}} @property="twitterTitle">
|
||
<label for="twitter-title">Twitter title</label>
|
||
<GhTextInput
|
||
@class="post-setting-twitter-title"
|
||
@id="twitter-title"
|
||
@name="post-setting-twitter-title"
|
||
@placeholder={{truncate this.twitterTitle 40}}
|
||
@value={{readonly this.twitterTitleScratch}}
|
||
@input={{action (mut this.twitterTitleScratch) value="target.value"}}
|
||
@focus-out={{action "setTwitterTitle" this.twitterTitleScratch}}
|
||
@stopEnterKeyDownPropagation={{true}}
|
||
data-test-field="twitter-title" />
|
||
<GhErrorMessage @errors={{this.post.errors}} @property="twitterTitle" data-test-error="twitter-title" />
|
||
</GhFormGroup>
|
||
|
||
<GhFormGroup @errors={{this.post.errors}} @hasValidated={{this.post.hasValidated}} @property="twitterDescription">
|
||
<label for="twitter-description">Twitter description</label>
|
||
<GhTextarea
|
||
@class="post-setting-twitter-description"
|
||
@id="twitter-description"
|
||
@name="post-setting-twitter-description"
|
||
@placeholder={{truncate this.twitterDescription 150}}
|
||
@stopEnterKeyDownPropagation="true"
|
||
@value={{readonly this.twitterDescriptionScratch}}
|
||
@input={{action (mut this.twitterDescriptionScratch) value="target.value"}}
|
||
@focus-out={{action "setTwitterDescription" this.twitterDescriptionScratch}}
|
||
data-test-field="twitter-description" />
|
||
<GhErrorMessage @errors={{this.post.errors}} @property="twitterDescription" data-test-error="twitter-description" />
|
||
</GhFormGroup>
|
||
|
||
<div class="form-group">
|
||
<label>Twitter preview</label>
|
||
<div class="gh-social-twitter-post-preview">
|
||
{{#if this.twitterImage}}
|
||
<div class="gh-social-twitter-preview-image" style={{background-image-style this.twitterImage}}></div>
|
||
{{/if}}
|
||
<div class="gh-social-twitter-preview-content">
|
||
<div class="gh-social-twitter-preview-title">{{this.twitterTitle}}</div>
|
||
<div class="gh-social-twitter-preview-desc">{{truncate this.twitterDescription}}</div>
|
||
<div class="gh-social-twitter-preview-meta">
|
||
{{svg-jar "twitter-link"}}
|
||
{{this.config.blogDomain}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</form>
|
||
</div>
|
||
{{/if}}
|
||
|
||
{{#if (eq this.subview "email-settings")}}
|
||
<GhPostSettingsMenu::Email
|
||
@post={{this.post}}
|
||
@savePostTask={{this.savePostTask}}
|
||
@toggleEmailPreviewModal={{this.toggleEmailPreviewModal}}
|
||
@close={{action "closeSubview"}}
|
||
/>
|
||
{{/if}}
|
||
|
||
{{#if (eq this.subview "facebook-data")}}
|
||
<div class="settings-menu-header subview">
|
||
<button aria-label="Back" {{action "closeSubview"}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
|
||
<h4>Facebook card</h4>
|
||
<div style="width:23px;"></div>
|
||
</div>
|
||
|
||
<div class="settings-menu-content">
|
||
<form {{action "discardEnter" on="submit"}}>
|
||
<GhImageUploaderWithPreview
|
||
@image={{this.post.ogImage}}
|
||
@text="Add Facebook image"
|
||
@allowUnsplash={{true}}
|
||
@update={{action "setOgImage"}}
|
||
@remove={{action "clearOgImage"}}
|
||
/>
|
||
<GhFormGroup @errors={{this.post.errors}} @hasValidated={{this.post.hasValidated}} @property="ogTitle">
|
||
<label for="og-title">Facebook title</label>
|
||
<GhTextInput
|
||
@class="post-setting-og-title"
|
||
@id="og-title"
|
||
@name="post-setting-og-title"
|
||
@placeholder={{truncate this.facebookTitle 40}}
|
||
@value={{readonly this.ogTitleScratch}}
|
||
@input={{action (mut this.ogTitleScratch) value="target.value"}}
|
||
@focus-out={{action "setOgTitle" this.ogTitleScratch}}
|
||
@stopEnterKeyDownPropagation={{true}}
|
||
data-test-field="og-title" />
|
||
<GhErrorMessage @errors={{this.post.errors}} @property="ogTitle" data-test-error="og-title" />
|
||
</GhFormGroup>
|
||
|
||
<GhFormGroup @errors={{this.post.errors}} @hasValidated={{this.post.hasValidated}} @property="ogDescription">
|
||
<label for="og-description">Facebook description</label>
|
||
<GhTextarea
|
||
@class="post-setting-og-description"
|
||
@id="og-description" @name="post-setting-og-description"
|
||
@placeholder={{truncate this.facebookDescription 150}}
|
||
@value={{readonly this.ogDescriptionScratch}}
|
||
@input={{action (mut this.ogDescriptionScratch) value="target.value"}}
|
||
@focus-out={{action "setOgDescription" this.ogDescriptionScratch}}
|
||
@stopEnterKeyDownPropagation="true"
|
||
data-test-field="og-description" />
|
||
<GhErrorMessage @errors={{this.post.errors}} @property="ogDescription" data-test-error="og-description" />
|
||
</GhFormGroup>
|
||
|
||
<div class="form-group">
|
||
<label>Facebook preview</label>
|
||
<div class="gh-social-og-preview no-container">
|
||
{{#if this.facebookImage}}
|
||
<div class="gh-social-og-preview-image" style={{background-image-style this.facebookImage}}></div>
|
||
{{/if}}
|
||
<div class="gh-social-og-preview-bookmark">
|
||
{{!-- Ensures description is hidden if title exceeds one line --}}
|
||
<div class="gh-social-og-preview-content">
|
||
<div class="gh-social-og-preview-meta">
|
||
{{this.config.blogDomain}}
|
||
</div>
|
||
<div class="gh-social-og-preview-title">{{truncate this.facebookTitle}}</div>
|
||
<div class="gh-social-og-preview-desc">{{truncate this.facebookDescription}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</form>
|
||
</div>
|
||
{{/if}}
|
||
|
||
{{#if (eq this.subview "codeinjection")}}
|
||
<div class="settings-menu-header subview">
|
||
<button aria-label="Back" {{action "closeSubview"}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
|
||
<h4>Code injection</h4>
|
||
<div style="width:23px;"></div>
|
||
</div>
|
||
|
||
<div class="settings-menu-content settings-menu-content-codeinjection">
|
||
<form {{action "discardEnter" on="submit"}}>
|
||
<GhFormGroup @errors={{this.post.errors}} @hasValidated={{this.post.hasValidated}} @property="codeinjectionHead">
|
||
<label for="codeinjection-head">{{capitalize this.post.displayName}} header <code>\{{ghost_head}}</code></label>
|
||
<GhCmEditor @value={{this.codeinjectionHeadScratch}}
|
||
@id="post-setting-codeinjection-head"
|
||
@class="post-setting-codeinjection"
|
||
@name="post-setting-codeinjection-head"
|
||
@focusOut={{action "setHeaderInjection" this.codeinjectionHeadScratch}}
|
||
@stopEnterKeyDownPropagation="true"
|
||
@update={{action (mut this.codeinjectionHeadScratch)}}
|
||
data-test-field="codeinjection-head" />
|
||
<GhErrorMessage @errors={{this.post.errors}} @property="codeinjectionHead" data-test-error="codeinjection-head" />
|
||
</GhFormGroup>
|
||
|
||
<GhFormGroup @errors={{this.post.errors}} @hasValidated={{this.post.hasValidated}} @property="codeinjectionFoot">
|
||
<label for="codeinjection-foot">{{capitalize this.post.displayName}} footer <code>\{{ghost_foot}}</code></label>
|
||
<GhCmEditor @value={{this.codeinjectionFootScratch}}
|
||
@id="post-setting-codeinjection-foot"
|
||
@class="post-setting-codeinjection"
|
||
@name="post-setting-codeinjection-foot"
|
||
@focusOut={{action "setFooterInjection" this.codeinjectionFootScratch}}
|
||
@stopEnterKeyDownPropagation="true"
|
||
@update={{action (mut this.codeinjectionFootScratch)}}
|
||
data-test-field="codeinjection-foot" />
|
||
<GhErrorMessage @errors={{this.post.errors}} @property="codeinjectionFoot" data-test-error="codeinjection-foot" />
|
||
</GhFormGroup>
|
||
</form>
|
||
</div>
|
||
{{/if}}
|
||
</div>
|
||
</div>
|
||
{{/if}}
|
||
</div>
|
||
</div>
|