<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".stories.viewer.StoryViewerActivity">

    <org.thoughtcrime.securesms.util.views.TouchInterceptingFrameLayout
        android:id="@+id/story_content_card_touch_interceptor"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="9:16"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0">

        <androidx.cardview.widget.CardView
            android:id="@+id/story_content_card"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:cardBackgroundColor="@color/transparent"
            app:cardCornerRadius="18dp"
            app:cardElevation="0dp">

            <androidx.fragment.app.FragmentContainerView
                android:id="@+id/story_content_container"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:background="@drawable/test_gradient" />

            <View
                android:id="@+id/story_gradient_top"
                android:layout_width="match_parent"
                android:layout_height="160dp"
                android:background="@drawable/story_gradient_top" />

            <View
                android:id="@+id/story_gradient_bottom"
                android:layout_width="match_parent"
                android:layout_height="160dp"
                android:layout_gravity="bottom"
                android:background="@drawable/story_gradient_bottom" />

            <org.thoughtcrime.securesms.stories.StorySlateView
                android:id="@+id/story_slate"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

        </androidx.cardview.widget.CardView>

        <org.thoughtcrime.securesms.stories.StoryVolumeOverlayView
            android:id="@+id/story_volume_overlay"
            android:alpha="0"
            android:layout_gravity="center_vertical|end"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </org.thoughtcrime.securesms.util.views.TouchInterceptingFrameLayout>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/views_and_replies_bar"
        android:layout_width="match_parent"
        android:layout_height="48sp"
        android:background="?selectableItemBackground"
        android:gravity="center"
        android:textAppearance="@style/Signal.Text.Body"
        android:textColor="@color/signal_colorOnSurface"
        app:iconGravity="textStart"
        app:iconSize="20dp"
        app:iconTint="@color/signal_colorOnSurface"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/story_content_card_touch_interceptor"
        app:layout_constraintVertical_bias="0"
        tools:icon="@drawable/ic_reply_24_outline"
        tools:text="6 views 4 replies" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/replies_bar_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="progress, story_content_card_touch_interceptor" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/story_from_barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="top"
        app:constraint_referenced_ids="from,sender_avatar,group_avatar,more" />

    <FrameLayout
        android:id="@+id/story_caption_container"
        android:layout_width="0dp"
        android:layout_height="95sp"
        app:layout_constrainedHeight="true"
        app:layout_constraintBottom_toTopOf="@id/story_from_barrier"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1">

        <org.thoughtcrime.securesms.components.emoji.EmojiTextView
            android:id="@+id/story_caption"
            android:layout_width="match_parent"
            android:layout_height="95sp"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="24dp"
            android:gravity="bottom"
            android:textAppearance="@style/Signal.Text.BodyLarge"
            android:textColor="@color/signal_colorNeutralInverse"
            tools:text="Ugh." />
    </FrameLayout>

    <View
        android:id="@+id/story_large_caption_overlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/transparent_black_40"
        android:visibility="gone" />

    <org.thoughtcrime.securesms.components.emoji.EmojiTextView
        android:id="@+id/story_large_caption"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="24dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="24dp"
        android:gravity="bottom"
        android:textAppearance="@style/Signal.Text.Body"
        android:visibility="gone"
        app:layout_constrainedHeight="true"
        app:layout_constraintBottom_toTopOf="@id/story_from_barrier"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/close"
        app:layout_constraintVertical_bias="1"
        tools:text="Ugh." />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/close"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="4dp"
        android:layout_marginTop="4dp"
        android:background="?selectableItemBackgroundBorderless"
        android:scaleType="centerInside"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/story_content_card_touch_interceptor"
        app:srcCompat="@drawable/ic_x_24"
        app:tint="@color/signal_colorNeutralInverse" />

    <org.thoughtcrime.securesms.components.AvatarImageView
        android:id="@+id/sender_avatar"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginStart="16dp"
        app:layout_constraintBottom_toBottomOf="@id/distribution_list"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/from"
        app:layout_goneMarginBottom="16dp" />

    <org.thoughtcrime.securesms.components.AvatarImageView
        android:id="@+id/group_avatar"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginStart="24dp"
        app:layout_constraintBottom_toBottomOf="@id/sender_avatar"
        app:layout_constraintStart_toStartOf="@id/sender_avatar"
        app:layout_constraintTop_toTopOf="@id/sender_avatar" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/avatar_barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="sender_avatar,group_avatar" />

    <TextView
        android:id="@+id/from"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="12dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:textAppearance="@style/TextAppearance.Signal.Body2.Bold"
        android:textColor="@color/signal_colorNeutralInverse"
        app:layout_constrainedWidth="true"
        app:layout_constraintBottom_toTopOf="@id/distribution_list"
        app:layout_constraintEnd_toStartOf="@id/date"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toEndOf="@id/avatar_barrier"
        app:layout_goneMarginBottom="20dp"
        tools:text="Matthew Hall to Crazy Family I only see on Holiday" />

    <TextView
        android:id="@+id/date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="12dp"
        android:alpha="0.64"
        android:textAppearance="@style/Signal.Text.MaterialCaption"
        android:textColor="@color/signal_colorNeutralVariantInverse"
        app:layout_constraintBottom_toBottomOf="@id/from"
        app:layout_constraintEnd_toStartOf="@id/more"
        app:layout_constraintStart_toEndOf="@id/from"
        tools:text="20m" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/distribution_list"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="12dp"
        android:layout_marginBottom="14dp"
        android:drawablePadding="4dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:textAppearance="@style/Signal.Text.MaterialCaption"
        android:visibility="gone"
        app:drawableStartCompat="@drawable/ic_lock_16"
        app:drawableTint="@color/transparent_white_80"
        app:layout_constraintBottom_toTopOf="@id/progress"
        app:layout_constraintEnd_toStartOf="@id/more"
        app:layout_constraintStart_toStartOf="@id/from"
        tools:text="My crazy distribution group" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/more"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginBottom="4dp"
        android:background="?selectableItemBackgroundBorderless"
        android:scaleType="centerInside"
        app:layout_constraintBottom_toTopOf="@id/progress"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@drawable/ic_more_vert_24"
        app:tint="@color/signal_colorNeutralInverse" />

    <org.thoughtcrime.securesms.components.segmentedprogressbar.SegmentedProgressBar
        android:id="@+id/progress"
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toTopOf="@id/views_and_replies_bar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:segmentBackgroundColor="@color/transparent_white_40"
        app:segmentCornerRadius="10dp"
        app:segmentMargins="2dp"
        app:segmentSelectedBackgroundColor="@color/signal_colorNeutralInverse"
        app:segmentSelectedStrokeColor="@color/signal_colorNeutralInverse"
        app:segmentStrokeColor="@color/signal_colorNeutralInverse"
        app:totalSegments="0"
        tools:totalSegments="5" />

    <org.thoughtcrime.securesms.stories.viewer.reply.reaction.OnReactionSentView
        android:id="@+id/on_reaction_sent_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <ViewStub
        android:id="@+id/story_first_time_nav_stub"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:inflatedId="@+id/story_first_time_navigation_view"
        android:layout="@layout/story_viewer_first_time_navigation_stub"
        app:layout_constraintBottom_toBottomOf="@id/story_content_card_touch_interceptor"
        app:layout_constraintTop_toTopOf="@id/story_content_card_touch_interceptor" />

</androidx.constraintlayout.widget.ConstraintLayout>