<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/layout_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="@dimen/reader_card_margin"
    android:layout_marginRight="@dimen/reader_card_margin"
    android:background="@color/white"
    android:paddingLeft="@dimen/margin_medium"
    android:paddingRight="@dimen/margin_medium">

    <!-- spacer_comment_indent width and visibility set at run-time based on comment indent level -->
    <View
        android:id="@+id/spacer_comment_indent"
        android:layout_width="@dimen/reader_comment_indent_per_level"
        android:layout_height="wrap_content"
        android:visibility="gone" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/margin_large"
        android:layout_marginLeft="@dimen/reader_card_content_padding"
        android:layout_marginRight="@dimen/reader_card_content_padding"
        android:layout_marginTop="@dimen/margin_large"
        android:layout_toRightOf="@+id/spacer_comment_indent"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/layout_author"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <org.wordpress.android.widgets.WPNetworkImageView
                android:id="@+id/image_comment_avatar"
                android:layout_width="@dimen/avatar_sz_extra_small"
                android:layout_height="@dimen/avatar_sz_extra_small"
                android:layout_marginRight="@dimen/margin_small"
                tools:src="@drawable/gravatar_placeholder" />

            <org.wordpress.android.widgets.WPTextView
                android:id="@+id/text_comment_author"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="@dimen/margin_medium"
                android:background="?android:selectableItemBackground"
                android:textColor="@color/grey_dark"
                android:textSize="@dimen/text_sz_medium"
                android:textStyle="bold"
                tools:text="text_comment_author" />
        </LinearLayout>

        <org.wordpress.android.widgets.WPTextView
            android:id="@+id/text_comment_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/margin_small"
            android:layout_marginTop="@dimen/margin_medium"
            android:focusable="false"
            android:focusableInTouchMode="false"
            android:lineSpacingMultiplier="1.1"
            android:textColor="@color/grey_dark"
            android:textSize="@dimen/text_sz_medium"
            app:wpFontFamily="merriweather"
            tools:text="text_comment_text" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <org.wordpress.android.widgets.WPTextView
                android:id="@+id/text_comment_date"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:textColor="@color/grey"
                android:textSize="@dimen/text_sz_medium"
                tools:text="date" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignWithParentIfMissing="true"
                android:layout_centerVertical="true"
                android:layout_toLeftOf="@+id/count_likes"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/image_comment_reply"
                    android:layout_width="@dimen/reader_button_icon"
                    android:layout_height="@dimen/reader_button_icon"
                    android:layout_gravity="center_vertical"
                    android:layout_marginLeft="@dimen/margin_medium"
                    android:padding="@dimen/margin_extra_small"
                    app:srcCompat="@drawable/ic_action_reply" />

                <org.wordpress.android.widgets.WPTextView
                    android:id="@+id/text_comment_reply"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:text="@string/reader_label_reply"
                    android:textColor="@color/grey_lighten_10"
                    android:textSize="@dimen/text_sz_medium" />
            </LinearLayout>

            <org.wordpress.android.ui.reader.views.ReaderIconCountView
                android:id="@+id/count_likes"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginLeft="@dimen/margin_large" />

        </RelativeLayout>

    </LinearLayout>

    <!-- progress bar that appears while submitting a comment -->
    <ProgressBar
        android:id="@+id/progress_comment"
        style="?android:attr/progressBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:visibility="gone"
        tools:visibility="visible" />

</RelativeLayout>