@extends('layouts.mypage')

@section('page-header')
<h1 class="page-header">My Story</h1>
@endsection


@section('content')
<style>
/* Social feed */
.social-feed-separated .social-feed-box {
  margin-left: 62px;
}
.social-feed-separated .social-avatar {
  float: left;
  padding: 0;
}
.social-feed-separated .social-avatar img {
  width: 52px;
  height: 52px;
  border: 1px solid #e7eaec;
}
.social-feed-separated .social-feed-box .social-avatar {
  padding: 15px 15px 0 15px;
  float: none;
}
.social-feed-box {
  /*padding: 15px;*/
  border: 1px solid #e7eaec;
  background: #fff;
  margin-bottom: 15px;
}
.article .social-feed-box {
  margin-bottom: 0;
  border-bottom: none;
}
.article .social-feed-box:last-child {
  margin-bottom: 0;
  border-bottom: 1px solid #e7eaec;
}
.article .social-feed-box p {
  font-size: 13px;
  line-height: 18px;
}
.social-action {
  margin: 15px;
}
.social-avatar {
  padding: 15px 15px 0 15px;
}
.social-comment .social-comment {
  margin-left: 45px;
}
.social-avatar img {
  height: 40px;
  width: 40px;
  margin-right: 10px;
}
.social-avatar .media-body a {
  font-size: 14px;
  display: block;
}
.social-body {
  padding: 15px;
}
.social-body img {
  margin-bottom: 10px;
}
.social-footer {
  border-top: 1px solid #e7eaec;
  padding: 10px 15px;
  background: #f9f9f9;
}
.social-footer .social-comment img {
  width: 32px;
  margin-right: 10px;
}
.social-comment:first-child {
  margin-top: 0;
}
.social-comment {
  margin-top: 15px;
}
textarea.form-control {
    height: auto;
}
.form-control, .single-line {
    background-color: #FFFFFF;
    background-image: none;
    border: 1px solid #e5e6e7;
    border-radius: 1px;
    color: inherit;
    display: block;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
    font-size: 14px;
}
.feed-element, .media-body {
    overflow: hidden;
}
.media-body {
    display: block;
    width: auto;
}
</style>

<div style="max-width:600px;margin:0 auto;">

@if (Auth::check())
<div class="panel">
	<div class="panel-heading pl10">
		<span class="panel-title">
		Write Form
		</span>
	</div>
	<div class="panel-body pn pt20">
		<div class="admin-form theme-system" style="padding:16px;">
			<div class="section" id="spy2">
			<label for="story_img" class="field file">
			<span class="button btn-default"> Choose File </span>
			<input type="file" class="gui-file" name="story_img" id="story_img" onchange="document.getElementById('uploader1').value = this.value;">
			<input type="text" class="gui-input" id="uploader1" placeholder="no file selected" readonly="">
			</label>
			</div>

			<div class="section" id="spy3">
			<label for="comment" class="field prepend-icon">
			<textarea class="gui-textarea" id="comment" name="comment" placeholder="Your comment" aria-required="true" aria-invalid="false"></textarea>
			<label for="comment" class="field-icon">
			<i class="fa fa-comments"></i>
			</label>
			</label>
			</div>

			<div class="text-right">
			<button id="btn_story_write" class="button btn-system submit-btn">Write Story</button>
			</div>
		</div>
	</div>
</div>
@endif
    @include('mypage.partial.story')
</div>
@endsection



@section('script')
	@include('script.comment')
@endsection