<div class="overlay overlay--search" style="display:none" id="overlay--search">
	<button class="btn--close" rv-on-click="reset"></button>
	<div class="container pb-1">
		<h1 class="title">{{__ 'Căutare'}}</h1>
		<form action="" class="form">
			<div class="frow">
				<div class="col-xs wrap--input">
					<input type="text" name="search" title="{{__ 'Cautare...'}}"
					       placeholder="{{__ 'Cautare...'}}"
					       rv-value="keyword">
				</div>
				<div class="col-xs pl-1 wrap--search-btn">
					<button class="btn btn--accent btn--submit">{{__ 'Caută'}}</button>
				</div>
			</div>
		</form>
		<div class="wrap--search-results" rv-if-not-empty="results">
			<p class="summary">
				{{__ 'Am găsit {resultsCount} rezultate'}}
			</p>
		</div>
		<div class="wrap--search-results" rv-if="noResults">
			<p class="summary no-results">
				{{__ 'Nu am găsit nimic'}}
			</p>
		</div>
	</div>
	<div class="wrap--content">
		<div class="container">
			<div class="wrap--search-results" rv-if-not-empty="results">
				<div class="items">
					<div class="post post--sm frow"
					     rv-each-article="results">
						<a rv-href="article.url" class="col-xs wrap--image"
						   rv-style-background-image="article.image_bg"
						   rv-class-no-image="article.no_image"></a>
						<div class="col-xs wrap--item-content">
							<div class="content">
								<div>
									<div class="top--info">
										<span class="date">{article.prettyCreatedAt}</span>
										<span class="views">{article.views}</span>
									</div>
									<a rv-href="article.url" class="title">{article.title}</a>
									<p class="description" rv-html="article.content"></p>
								</div>
								<a rv-href="article.url" class="btn btn--read-more btn--rounded btn--transparent btn--dark">
									{{__ 'Mai mult'}}</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="spinner" rv-show="loading"></div>
		</div>

		<div class="more-separator mb-4"
		     rv-show="more"
		     rv-on-click="fetchPage">
			<div class="more-separator wrapper"></div>
			<div class="container">
				<button class="btn btn--pale btn--rounded">{{__ 'Mai mult'}}</button>
			</div>
		</div>


	</div>
</div>